14°

Sass 延伸

样式继承 @extend

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。

比如下面的普通错误样式和严重错误样式的对比:

    // HTML 代码
    <div class="error seriousError">
      样式继承 @extend!
    </div>
// 未使用@extend 的普通样式和严重样式
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

// 使用了@extend 的普通样式和严重样式
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.error 下的所有样式继承给 .seriousError,而 border-width: 3px; 是单独定义的,这个时候使用 .seriousError 就可以不再使用 .error

多重延伸 (Multiple Extends)

同一个选择器可以延伸给多个选择器,它所包含的属性将继承给所有被延伸的选择器:

    // .scss 语法
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .attention {
      font-size: 3em;
      background-color: #ff0;
    }
    .seriousError {
      @extend .error;
      @extend .attention;
      border-width: 3px;
    }
// 编译后的 css
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}
.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  border-width: 3px; 
}

继续延伸 (Chaining Extends)

当一个选择器延伸给第二个后,可以继续选择第二个选择器延伸给第三个(在使用 @extend 时,必须在同一块域内 )。

    // .scss 语法
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    .criticalError {
      @extend .seriousError;
      position: fixed;
      top: 10%;
      bottom: 10%;
      left: 10%;
      right: 10%;   
.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; 
}
.seriousError, .criticalError {
  border-width: 3px;
}
.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; 
}

占位符选择器

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

    .notice {
      @extend %extreme;
    }
// 编译 css
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}

本文由【凌兮洛】发布于开源中国,原文链接:https://my.oschina.net/u/4144971/blog/3136791

全部评论: 0

    我有话说: