sass 相关问题

我正在使用Bootstrap的SASS端口，我想知道使用预定义的mixins和使用SASS的@extend之间是否有什么区别。例如，如果我有：我正在使用 Bootstrap 的 SASS 端口，我想知道使用预定义的 mixin 和使用 SASS 的 @extend 之间是否有任何区别。例如，如果我有： <div class="wrapper"> Some content here.... </div> 做和做有什么区别吗 .wrapper { @include make-row(); } 和 .wrapper { @extend .row; } ？如果没有区别，是否还有其他 mixin 不等同于单个 @extend 语句？如果没有这样的 mixins，为什么会有 mixins 存在？ @extend 和 mixin 之间的最大区别在于 css 的编译方式。在简单的例子中，它看起来并不多，但差异和影响是显着的，如果不小心使用的话，在野外可能会让人非常头疼。 @extend有点像愚人金，乍一看很棒，但是...... 让我们看一个简单的例子： @扩展 .row { width: 50px; } .new-row { @extend .row; } .another-row { @extend .row; } 编译为： .row, .new-row, .another-row { width: 50px; } 混合 @mixin row() { width: 50px; } .new-row { @include row(); } .another-row { @include row(); } 编译为： .new-row { width: 50px; } .another-row { width: 50px; } mixin 包含它所点击的所有属性 - 每次都会复制它们 - 而 @extend 对选择器进行分组并定义一次属性。这并不是很明显，因为差异在于编译的 css，但它有一些重要的含义：加载订单使用@extend，选择器将被分组在 sass 中遇到它们的第一个点，这可能会导致一些奇怪的覆盖。如果您定义一个选择器并使用 @extend 引入属性并尝试覆盖之前在 sass 中定义的属性，但在扩展属性在 css 中分组之后，覆盖将不起作用。这可能相当令人困惑。考虑这组按逻辑顺序排列的 css 定义和可能的 HTML：<div class='row highlight-row'></div>: .red-text { color: red; } .row { color: green; } .highlight-row { @extend .red-text; } 编译为： .red-text, .highlight-row { color: red; } .row { color: green; } 因此，即使 sass 排序使其看起来行颜色为红色，编译后的 css 也会使其变为绿色分组不佳 @extend 可能会导致生成的 CSS 中选择器分组不佳。例如，您最终可能会得到三十或四十个不相关的事物，它们都共享相同的属性。使用 @extend 表示字体就是一个很好的例子。筑巢如果您使用深度嵌套的 sass（这可能是有益的，但不是最好的地方，除非您保持严格的纪律）并且您使用 @extend，您将为您使用的每个 @extend 复制完全嵌套的选择器，导致css臃肿。我已经看过很多次了： .selector-1 .selector-2 .selector-3 .selector-4, .selector-1 .selector-2 .selector-3 .selector-4 a, .selector-1 .selector-2 .selector-3 .selector-4 li, .selector-1 .selector-2 .selector-3 .selector-4 td { font-family: arial; } 如果您是 SASS 新手，那么查看编译后的 css 是值得的。媒体查询 @extend 不适用于媒体查询，因为媒体查询不是选择器。结论我的经验法则是，如果您没有参数，则在 mixin 上使用 @extend 并且如果您可以合理地定义 @extend 并在 sass 中附近存在的几个紧密相关的选择器之间共享它，例如，在定义 sass 模块的同一文件中。按钮是一个很好的使用 @extend 的例子： %button { padding: 10px; } .call-to-action { @extend %button; background-color: $green; } .submit { @extend %button; background-color: $grey; } 帮助做出选择的最佳文章是这里 PS，%符号是占位符扩展的使用

css twitter-bootstrap sass

回答 1 投票 0

在加载的字体中使用不同的字体样式

有没有办法使用项目中加载的字体的不同样式？例如： @font-face { 字体系列：WorkSans；字体样式：正常；字体显示：后备； src：网址...

css sass

回答 1 投票 0

sass 相关问题

最新问题