阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Sass 给混合器传参

      混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参,来定制混合器生成的精确样式。当@include混合器时,参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript,这种方式跟JavaScriptfunction很像:

      @mixin link-colors($normal, $hover, $visited) {
        color: $normal;
        &:hover { color: $hover; }
        &:visited { color: $visited; }
      }
      

      当混合器被@include时,你可以把它当作一个css函数来传参。如果你像下边这样写:

      a {
        @include link-colors(blue, red, green);
      }
      
      //Sass最终生成的是:
      
      a { color: blue; }
      a:hover { color: red; }
      a:visited { color: green; }
      

      当你@include混合器时,有时候可能会很难区分每个参数是什么意思,参数之间是一个什么样的顺序。为了解决这个问题,sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参,参数顺序就不必再在乎了,只需要保证没有漏掉参数即可:

      a {
          @include link-colors(
            $normal: blue,
            $visited: green,
            $hover: red
        );
      }
      

      尽管给混合器加参数来实现定制很好,但是有时有些参数我们没有定制的需要,这时候也需要赋值一个变量就变成很痛苦的事情了。所以sass允许混合器声明时给参数赋默认值。

      目录
      本文目录
      目录