Stylus 继承(@extend)



  • 定义和使用

    Stylus 的 @extend 指令受 SASS 实现的启发,基本一致,除了些轻微差异。此功能大大简化了继承其他语义规则集的语义规则集的维护。
    尽管你可以使用混写实现类似效果,但会导致重复的CSS. 典型的模式式定义如下的几个类名,然后归结到一个元素中,例如"warning message".
    该技术实现是没什么问题,但是维护就比较麻烦了。
    message,
    .warning {
      padding: 10px;
      border: 1px solid #eee;
    }
    
    .warning {
      color: #E2E21E;
    }
    
    
  • 使用__@extend__

    使用 __@extend__ 得到同样的输出,只要把对应的选择器传给 @extend 即可。然后 .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如下:
    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.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
    // 解析错误: 无法继承自 button: 不能继承嵌套选择器
            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
    
    
    生成 CSS 如下:
    form input[type=text],
    form textarea {
      padding: 5px;
      border: 1px solid #eee;
      color: #ddd;
    }
    textarea {
      padding: 10px;
    }