sass 相关问题

Sass（Syntactically Awesome Style Sheets）是CSS的扩展，添加了嵌套规则，变量，mixins和类扩展等功能。这使开发人员能够编写结构化，可管理且可重用的CSS。 Sass被编译成标准CSS。

如何使.col元素100%为.container？ .包装器{ 最大高度：300px；显示：柔性； } 。容器 { 弹性增长：1；显示：柔性；溢出-y：自动；溢出-x：隐藏；差距：1...

html css sass flexbox grid

回答 2 投票 0

例如，HTML 代码如下：这是段落中的一些文字。例如，这是 HTML 代码： <div class="topSection"> <div class="middleSection"> <p>This is some text in a paragraph.</p> </div> <div class="lowerSection"> <p>This is some text in a paragraph.</p> </div> </div> 这是CSS .topSection{ .middleSection, .lowerSection{ padding: 20px; font-size: 20px p{ background-color: lightgrey; } } } 按照这个 CSS 的结构方式，我想知道是否要将 p 标签样式仅应用于 middleSection 类，而不是 lowerSection 类，我该怎么做？我想通过使用 :not() 来做类似的事情，但这不起作用： .topSection{ .middleSection, .lowerSection{ padding: 20px; font-size: 20px p:not(.lowerSection){ background-color: lightgrey; } } } 或者唯一的方法是为 middleSection 创建单独的 CSS 代码，然后将 p 标签样式应用于它？对我来说，这似乎是额外的代码，用于解决一个小问题。有没有更短的方法来解决这个问题？这似乎是一个简单的问题，但某些样式的范围是 CSS 中最困难的事情之一。这是一个长期存在的问题，最终我们有了一些工具来解决它。我知道这里有很多代码，但就像我说的，这不是一个简单的问题。也许您可以从这些解决方案中获得一些灵感。您可以使用 :has 伪类选择器来分隔不同类中 p 元素的样式： .middleSection:has(p) p { background-color: lightgrey; 或者您可以使用 @scope at 规则，这是执行此操作的最新且更好的方法： @scope (.middleSection) to (.lowerSection) { p { background-color: lightgrey; } @scopeat规则有部分浏览器支持，所以你可能不想使用这个选项，但它对我们未来的CSS有很大帮助。

css sass

回答 1 投票 0

如何用弹性框填充所有可用空间

我正在尝试做的事情的图像我有三个弹性容器，我想让它们以最有效的方式填充可用空间。我想要我们标题旁边的开关...

css angular sass flexbox

回答 1 投票 0

如何更改突出显示/选定文本上的文本装饰颜色

我在突出显示/选择文本时更改了文本的颜色，但我刚刚注意到文本装饰仍然是黑色的。我在我的 ::selection css 中添加了 text-decoration-color: #fff 但它没有

css sass

回答 3 投票 0

在 Sass 中附加值

我正在使用 BEM 和 Sass，使用以下 @mixin： @mixin 修饰符($修饰符...) { $结果：''； @$modifiers 中的每个 $modifier { $结果：追加($结果，'#{&}--#{$modifier}'...

css loops sass append

回答 1 投票 0

Angular Material 17 - 如何从 Style.scss 中的主题获取原色

我刚刚将 Angular 应用程序从 16 升级到 17。应用程序具有如下自定义主题。 @use '@angular/material' 作为垫子； @include mat.core(); $pp: mat.define-palette(mat.$indigo-palette); $初级...

angular sass angular-material angular-upgrade angular17

回答 2 投票 0

这段代码如何适用于 React JS 项目？（动画 iOS）

我希望将此 VanillaJS 代码改编成 ReactJS 项目（iOS 应用程序动画）。我已经尝试了两天使用最佳实践来做到这一点，但我不能...... 这是来源链接...

javascript ios reactjs sass css-animations

回答 1 投票 0

用 CSS 包围在顶部和底部边框之间的文本

我想复制照片中的效果，上面和下面有粉红色的霓虹灯边框，以及它们之间的文字。我怎样才能用 CSS 实现这一点？我试过了，但达不到同样的效果...

html css sass responsive-design scss-lint

回答 1 投票 0

CSS：在一个类中定义媒体查询[关闭]

是否可以写类似的东西 .global-container 顶部边距：60px 背景图像：$image-bg @media（最大宽度：767px）顶部边距：0 背景图像：无所以我们可以定义...

css sass

回答 4 投票 0

选择位于具有“active”类的元素之前的一组 <li> 元素，而不是位于具有“active”类之后的元素

我想选择位于“active”类之前的一组元素，而不是位于“active”类之后的元素。 <... 我想选择位于“active”类之前的一组 <li> 元素，而不是位于“active”类之后的元素。 <li></li> <li></li> <li></li> <li></li> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> 使用 querySelectorAll() 将所有 <li> 元素选择到列表中。然后 filter() 该列表，搜索处于活动状态的列表。一旦找到它，设置一个标志并忽略其余的 <li> 元素。 let foundIt = false; let elements = [...document.querySelectorAll('li')]; let first = elements.filter(function(e) { if ( e.classList.contains('active') ) { foundIt = true; } return ! foundIt }) console.log(first) // The elements before the "active" one <li></li> <li></li> <li></li> <li></li> <li class="active"></li> <li></li> <li></li> <li></li> <li></li>

javascript css sass

回答 1 投票 0

想要选择位于“active”类之前的一组 <li> 元素，而不是位于“active”类之后的元素

我想选择位于“active”类之前的一组元素，而不是位于“active”类之后的元素。 <... 我想选择位于“active”类之前的一组 <li> 元素，而不是位于“active”类之后的元素。 <li></li> <li></li> <li></li> <li></li> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> 使用 querySelectorAll() 将所有 <li> 元素选择到列表中。然后 filter() 该列表，搜索处于活动状态的列表。一旦找到它，设置一个标志并忽略其余的 <li> 元素。 let foundIt = false; let elements = [...document.querySelectorAll('li')]; let first = elements.filter(function(e) { if ( e.classList.contains('active') ) { foundIt = true; } return ! foundIt }) console.log(first) <li></li> <li></li> <li></li> <li></li> <li class="active"></li> <li></li> <li></li> <li></li> <li></li>

javascript css sass

回答 1 投票 0

字体大小不变

当屏幕宽度减小到824px时，字体应该改变其大小，但这种情况不会发生。我无法改变 li 中尺寸减小的任何内容。但同时 header__header 发生变化...

html sass

回答 1 投票 0

将文本置于垫选择的垫选项中

我试图将文本置于嵌套在垫选择中的垫选项内，如下所示：测试1 测试2<...

angular sass mat-select

回答 1 投票 0

Svelte 组件样式不会覆盖全局样式

我在 Sveltekit 项目中使用 scss，并将我的主要全局样式包含在我的根布局文件中。导入'css/app.scss' 我在 Sveltekit 项目中使用 scss，并将我的主要全局样式包含在我的根布局文件中。 <script lang="ts"> import 'css/app.scss' </script 在我的全局样式中，我有以下样式： button { padding: 0; } 在组件中，我添加了这个本地样式： <style lang="sass"> button { padding: 1rem; } </style> 当站点渲染时，局部样式会被全局样式覆盖。我可以在本地样式中添加 !important ，但我正在寻找一种方法让本地样式始终优先于全局样式。提前感谢您的建议！在您的组件中，您可以使用具有更高特异性的 CSS 选择器，以使 CSS 规则中的 CSS 代码优先于其他地方的 CSS 代码。例如，在选择器中，类比标签名称具有更高的特异性，因此在组件中，您可以在 HTML 代码中向按钮添加 class="theButton"，然后在 CSS 代码中使用 .theButton 而不是 button。

sass svelte sveltekit

回答 1 投票 0

SCSS 和 LESS 的区别

我读过有关 SCSS 和 LESS 的内容。但我无法清楚地理解其中的差异。我知道SCSS和LESS都具有更多CSS的功能（我的意思是CSS的扩展）。 SCSS 之间有什么不同...

sass less

回答 2 投票 0

表单输入上的 CSS 强调色无法按预期工作

点击我蓝色！ ... <body> <p> <input type="radio" class="custom-radio-blue" checked /> Click me blue! </p> <p> <input type="radio" class="custom-radio-red" checked /> Click me red! </p> <style> .custom-radio-blue { accent-color: #01adef; } .custom-radio-red { accent-color: red; } </style> </body> 在我上面的代码中，为什么红色收音机工作正常，为什么不使用强调色 css 属性的蓝色？我无法解释为什么每个浏览器的外观都有不同的决定，但是如果你将蓝色从 accent-color: rgb(1,153,255); 至 accent-color: rgb(1,152,255); 或来自 accent-color: rgb(33,152,255); 至 accent-color: rgb(34,152,255); 浏览器将根据颜色亮度内部决定内部颜色是黑色还是白色。因此，作为解决方案，我建议您选择亮度范围相同的颜色

css sass radio-button accent-color

回答 1 投票 0

如何在sass中使用map-deep-get

我正在关注这篇文章https://www.sitepoint.com/better-solution-managing-z-index-sass/ 但是有一个缺失的链接，它没有将 map-deep-get 函数链接回 z 函数，a...

css function sass

回答 2 投票 0

如何在已设置高度但内容非常大的 div 上实现“查看更多”按钮？

我确信这个问题之前已经被问过很多次了，但我很难以一种能得到结果的方式来表达这个问题。我还发现了非常过时的答案（8 多年前），而且它们似乎也太

css angular sass angular-material

回答 2 投票 0

在哪里可以找到 Stylelint 使用的 CSS 属性顺序？

使用 Stylelint，我激活了 CSS 顺序选项。我无法设置 Visual Studio Code 来显示错误。在哪里可以找到使用过的声明/财产令？这些是 ru...