Skip to main content

Sass混合指令

Sass中的混合指令允许创建可以重用的代码片段，从而避免了代码的重复，提供代码的可维护性。

基本使用​

定义指令​

使用@mixin定义混合指令：

@mixin name {
  /* styles */
}

使用指令​

使用@include，后面跟上混合指令的名称即可：

/* 创建指令 */
@mixin large-text {
  font: {
    family: "Open Sans", sans-serif;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

p {
  @include large-text;
  padding: 20px;
}

/**
p {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 20px;
}
*/

混合指令编译之后，就是将混合指令内部的CSS样式放入到了@include的地方。

嵌套混合​

在一个混合指令中，可以引用其他的混合指令：

@mixin background {
  background-color: #fc0;
}

@mixin header-text {
  font-size: 20px;
}

@mixin compound {
  @include background;
  @include header-text;
}

p{
  @include compound;
}

/**
p {
  background-color: #fc0;
  font-size: 20px;
}
*/

混合指令可以直接在最外层使用，但要求混合指令的内部要有选择器：

@mixin background {
  background-color: #fc0;
}

@mixin header-text {
  font-size: 20px;
}

@mixin compound {
  /* 内部选择器 */
  div{
    @include background;
    @include header-text;
  }
  
}

/* 最外层使用 */
@include compound;

一般来讲，如果要在外部直接使用，会将其作为一个后代选择器：

.box{
  @include compound;
}

/**
.box div {
  background-color: #fc0;
  font-size: 20px;
}
*/

混合参数​

混合指令能够设置参数，只需要在混合指令的后面添加一对圆括号即可，括号里面书写对应的形参。

@mixin bg-color($color, $radius) {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: $color;
  border-radius: $radius;
}

.box {
  @include bg-color(red, 10px);
}

/**
.box {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: red;
  border-radius: 10px;
}
*/

定义混合如果指定了参数，那么在使用的时候，传递的参数的个数一定要和形参一致，否则编译会出错：

默认值​

形参支持添加默认值：

@mixin bg-color($color, $radius:20px) {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: $color;
  border-radius: $radius;
}

.box {
  @include bg-color(blue);
}

关键词传参​

在传递参数时，支持关键词传参，即指定哪一个参数是对应的哪一个形参：

@mixin bg-color($color: blue, $radius) {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: $color;
  border-radius: $radius;
}

.box1 {
  @include bg-color($radius: 20px, $color: pink);
}

.box2 {
  @include bg-color($radius: 20px);
}

/**
.box1 {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: pink;
  border-radius: 20px;
}

.box2 {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: blue;
  border-radius: 20px;
}
*/

不定参数​

如果不确定使用混合指令的地方会传入多少个参数，可以使用...来声明，Sass会将这些值当作一个列表来进行处理：

@mixin box-shadow($shadow...){
  // ...
  box-shadow: $shadow;
}

.box1{
  @include box-shadow(
    0 1px 2px rgba(0,0,0,.5)
  )
}

.box2{
  @include box-shadow(
    0 1px 2px rgba(0,0,0,.5),
    0 2px 5px rgba(100,0,0,.5)
  )
}

/**
.box1 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.box2 {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(100, 0, 0, 0.5);
}
*/

参数展开​

...有时候也可以表示为参数展开的含义：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: red, blue, pink;

.box{
  @include colors($values...)
}

@content​

@content表示占位的意思，在使用混合指令的时候，会将指令大括号里面的内容放置到@content的位置，有点类似于插槽：

@mixin test {
  html {
    @content
  }
};

@include test {
  background-color: red;
  .logo {
    width: 600px;
  }
}

@include test {
  color : blue;
  .box {
    width: 200px;
    height: 200px;
  }
}

/**
html {
  background-color: red;
}
html .logo {
  width: 600px;
}

html {
  color: blue;
}
html .box {
  width: 200px;
  height: 200px;
}
*/

在混合指令的局部作用域里面所定义的变量不会影响@content代码块中的变量，同样，在@content代码块中定义的变量不会影响到混合指令中的其他变量，两者之间的作用域是隔离的：

@mixin scope-test {
  $test-variable: "mixin";

  .mixin{
    content: $test-variable
  }

  @content
};

.test {
  $test-variable: "test";
  @include scope-test {
    .content {
      content : $test-variable
    }
  }
}

/**
.test .mixin {
  content: "mixin";
}
.test .content {
  content: "test";
}
*/
Last updated on