Stylus预处理器简介(十八)@EXTEND

@EXTEND

Stylus @extend指令的灵感来自于(本质上是一样的)SASS实现，只有很少的细微差别。该特性显著简化了继承自其他语义规则集的语义规则集的维护。

“扩展”mixin

尽管您可以使用mixin来达到类似的效果，但这可能会导致重复的CSS。典型的模式是定义如下所示的几个类，然后在元素上组合它们，如“warning message”。
虽然这种技术工作得很好，但很难维护。

 .message,
  .warning {
    padding: 10px;
    border: 1px solid #eee;
  }

  .warning {
    color: #E2E21E;
  }

使用@extend

要使用@extend产生相同的输出，只需将所需的选择器传递给它(注意@extend和@extends是相等的，其中一个只是另一个的别名)。然后，Stylus将把.warning选择器附加到现有的.message规则集。然后.warning类继承.message的属性。

 .message {
    padding: 10px;
    border: 1px solid #eee;
  }

  .warning {
    @extend .message;
    color: #E2E21E;
  }

下面是一个更复杂的例子，演示了@extend如何级联:

red = #E33E1E
  yellow = #E2E21E

  .message
    padding: 10px
    font: 14px Helvetica
    border: 1px solid #eee

  .warning
    @extends .message
    border-color: yellow
    background: yellow + 70%

  .error
    @extends .message
    border-color: red
    background: red + 70%

  .fatal
    @extends .error
    font-weight: bold
    color: red

生成以下CSS:

  .message,
  .warning,
  .error,
  .fatal {
    padding: 10px;
    font: 14px Helvetica;
    border: 1px solid #eee;
  }
  .warning {
    border-color: #e2e21e;
    background: #f6f6bc;
  }
  .error,
  .fatal {
    border-color: #e33e1e;
    background: #f7c5bc;
  }
  .fatal {
    font-weight: bold;
    color: #e33e1e;
  }

Stylus目前与SASS的不同之处在于，SASS不允许@extend嵌套选择器:

form
   button
     padding: 10px

 a.button
   @extend form button 
 Syntax error: Can't extend form button: can't extend nested selectors
         on line 6 of standard input
   Use --trace for backtrace.

对于Stylus，只要选择器匹配，它就能工作!

  form
     input[type=text]
       padding: 5px
       border: 1px solid #eee
       color: #ddd

   textarea
     @extends form input[type=text]
     padding: 10px

编译为：

 form input[type=text],
    textarea {
      padding: 5px;
      border: 1px solid #eee;
      color: #ddd;
    }
    textarea {
      padding: 10px;
    }

扩展多个选择器

Stylus允许你一次扩展多个选择器，只需要用逗号来写:

.a
  color: red

.b
  width: 100px

.c
  @extend .a, .b
  height: 200px

编译为：

.a,
.c {
  color: #f00;
}
.b,
.c {
  width: 100px;
}
.c {
  height: 200px;
}

占位符选择器

Stylus有一个类似于Sass的功能——占位符选择器。
这些选择器应该以foo)，并且不会在最终的CSS中产生。但是你仍然可以扩展它们:

$foo
  color: #FFF

$foo2
  color: red

.bar
  background: #000
  @extends $foo

.baz
  @extends $foo

编译为：

.bar,
.baz {
  color: #fff;
}
.bar {
  background: #000;
}

请注意，如果选择器没有扩展，那么它将不会出现在生成的CSS中，因此这是创建可扩展代码库的一种强大方法。虽然您可以通过mixins插入代码，但每次使用它们时，它们都会插入相同的代码，而扩展占位符会给您提供紧凑的输出。

可选的扩展

有时，能够扩展一些可能存在或不存在的东西可能是有用的，这取决于上下文。你可以添加任何选择器的后缀!optional来实现这一点:

$specialDesign
  color: #FFF

.btn
  @extend .design !optional, $specialDesign !optional

编译为：

.btn {
  color: #fff;
}