阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Stylus 选择器 Selectors

      缩排(Indentation)

      Stylus蛮“玄幻”的(如基于缩进),空格有重要的意义,所以,我们使用缩排和凹排代替花括号{以及}

      body
        color white
      

      上面代码就对应于:

      body {
        color: #fff;
      }
      

      如果你喜欢,你可以把冒号加上,用做分隔,便于阅读:

      body
        color: white
      

      规则集

      Stylus就跟CSS一样,允许你使用逗号为多个选择器同时定义属性。

      textarea, input
        border 1px solid #eee
      

      使用新行是一样的效果:

      textarea
      input
        border 1px solid #eee
      

      等同于:

      textarea,
      input {
        border: 1px solid #eee;
      }
      

      该规则唯一的例外就是长得像属性的选择器。例如,下面的foo bar baz可能是个属性或者是选择器。

      foo bar baz
      > input
        border 1px solid
      

      为解决这个原因,我们可以在尾部加个逗号:

      foo bar baz,
      form input,
      > a
        border 1px solid
      

      父级引用

      字符&指向父选择器。下面这个例子,我们两个选择器(textareainput)在:hover伪类选择器上都改变了color

      textarea
      input
        color #A7A7A7
        &:hover
          color #000
      

      等同于:

      textarea,
      input {
        color: #a7a7a7;
      }
      textarea:hover,
      input:hover {
        color: #000;
      }
      

      下面这个例子,IE浏览器利用了父级引用以及混合书写来实现2px的边框。

      box-shadow()
        -webkit-box-shadow arguments
        -moz-box-shadow arguments
        box-shadow arguments
        html.ie8 &,
        html.ie7 &,
        html.ie6 &
          border 2px solid arguments\[length(arguments) - 1\]
      
      body
        #login
          box-shadow 1px 1px 3px #eee
      

      其变身后面目:

      body #login {
        -webkit-box-shadow: 1px 1px 3px #eee;
        -moz-box-shadow: 1px 1px 3px #eee;
        box-shadow: 1px 1px 3px #eee;
      }
      html.ie8 body #login,
      html.ie7 body #login,
      html.ie6 body #login {
        border: 2px solid #eee;
      }
      

      消除歧义

      类似padding - n的表达式可能既被解释成减法运算,也可能被释义成一元负号属性。为了避免这种歧义,用括号包裹表达式:

      pad(n)
        padding (- n)
      
      body
        pad(5px)
      

      编译为:

      body {
        padding: -5px;
      }
      

      然而,只有在函数中才会这样(因为函数同时用返回值扮演混合或回调)。

      例如,下面这个就是OK的(产生与上面相同的结果):

      body
        padding -5px
      

      有Stylus无法处理的属性值?unquote()可以帮你:

      filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')
      

      生成为:

      filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
      
      目录
      目录