sass混合器

Posted 2021-01-09 jdsm

 

混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。功能类似于编程语言的函数。
- 通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。

//定义混合器
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//调用混合器
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

 

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。

//定义含参数的混合器
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//再样式规则中调用含参的混合器
a {
  @include link-colors(blue, red, green);
}
//还可以通过语法$name: value的形式指定每个参数的值。
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

选择器继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，这个通过@extend语法实现

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

 

--------------------- 本文来自 zuiziyoudexiao 的CSDN 博客