阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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如下:

      .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
      

      生成:

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