常忘知识点三-使用选择器继承来精简CSS --- @extend

推荐一个很详细的sass教程：https://www.sass.hk/docs/

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：

 <div class="error seriousError">

   Oh no! You've been hacked!

 </div>

样式如下

 .error {

   border: 1px #f00;

   background-color: #fdd;

 }

 .seriousError {

   border-width: 3px;

 }

麻烦的是，这样做必须时刻记住使用 .seriousError 时需要参考 .error 的样式，带来了很多不变：智能比如加重维护负担，导致 bug，或者给 HTML 添加无语意的样式。使用 @extend 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。

.error {

  border: 1px #f00;

  background-color: #fdd;

}

.seriousError {

  @extend .error;

  border-width: 3px;

}

上面代码的意思是将 .error 下的所有样式继承给 .seriousError，border-width: 3px; 是单独给 .seriousError 设定特殊样式，这样，使用 .seriousError 的地方可以不再使用 .error。

其他使用到 .error 的样式也会同样继承给 .seriousError

7.3.6. @extend-Only 选择器 (@extend-Only Selectors)

有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。

如果使用普通的 CSS 规则，最后会编译出很多用不到的样式，也容易与其他样式名冲突，所以，Sass 引入了“占位符选择器” (placeholder selectors)，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。

// This ruleset won't be rendered on its own.

#context a%extreme {

  color: blue;

  font-weight: bold;

  font-size: 2em;

}

占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。

.notice {

  @extend %extreme;

}

编译为

#context a.notice {

  color: blue;

  font-weight: bold;

  font-size: 2em; }

巴特西

常忘知识点三-使用选择器继承来精简CSS --- @extend

7.3.6. @extend-Only 选择器 (@extend-Only Selectors)

最新文章

热门文章