Sass 混合指令——提高你的 CSS 重复使用率

前言

Sass（Scss）混合指令看作函数，可以传递参数、参数变量、可以插入内容（类似于 Vue 组件插槽）。自定义函数，可以返回值，也有混合指令的特性。高效地管理和使用 CSS 样式，除了嵌套以外就是混合指令、函数，以及变量。

姚安网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联从2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

混合指令的作用就是重复使用一堆 CSS 样式，减少我们重复写的次数，只需要调用混合指令就可以完成工作。

指令基础

定义混合指令

混合指令用@mixin来表示，之后就是指令名称，下面是混合指令的定义语法规则：

@mixin name {
 // ...
}

比如，垂直水平居中的样式经常用到，所以搞一个混合指令比较合适：

@mixin flex {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

上面的混合指令还不算灵活，没有发挥它的优势，得配合参数或变量使用才是混合指令的完全体。

调用混合指令

调用混合指令用@include表示，加上指令名称就可以了，下面是调用混合指令的语法规则：

@include name();

这样就相当于把上面定义好的那一堆样式直接拿了过来，而我们不需要重复写一样的样式：

.app {
  @include flex();
}

假如元素对齐方式、排列方式要根据场景有所变化呢？属性值也是根据情况来变化，于是就要用到参数和变量。

参数基础

定义参数

参数的定义与变量定义的规则一样，都是$符号起头。参数其实就是一个占位符，等到我们调用指令时给其传递值代替占位符作为属性值就可以了。下面是给指令定义参数：

@mixin flex($justify, $align-content, $align-items, $flex-dir, $flex-wrap) {
  display: flex;
  justify-content: $justify;
  align-content: $align-content;
  align-items: $align-items;
  flex-direction: $flex-dir;
  flex-wrap: $flex-wrap;
}

调用指令并传值：

.app {
  @include flex(space-between, center, center, row, wrap);
}

参数默认值

给参数添加默认值，在调用时选择性传递参数，可以不用按照上面那样一个个地传递，点到为止：

@mixin flex($justify: center, $align-content: center, $align-items: center, $flex-dir: row, $flex-wrap: nowrap) {
  display: flex;
  justify-content: $justify;
  align-content: $align-content;
  align-items: $align-items;
  flex-direction: $flex-dir;
  flex-wrap: $flex-wrap;
}

给第一个参数传递值，覆盖默认值：

.app {
  @include flex(flex-start);
}

如果我们要给中间或者其他位置（不按照顺序）传递值，使得值与参数的位置不匹配，导致效果并非我们想要的。@include flex(flex-start, nowrap)，nowrap 是我要给最后一个参数传值，真实的情况是给到了第二个属性值。于是就要用到关键词参数。

关键词参数

关键词参数的作用就是，只对混合指令中某一个具体的参数进行传递。就是按照顺序坐座位和拿着座位号对号入座的区别；关键词参数就是拿着座位号对号入座，而不影响其他参数。

.app {
  @include flex($justify: flex-start, $flex-wrap: wrap);
}

如下图，只改变了第一个和最后一个参数的值：

参数变量

参数变量就是在不知道传入多少个参数的情况下使用的，比如 box-shadow 样式，参数可以一个或者多个：

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

.app {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

// ---------上面是一种用法，结合变量，我们也可以这样用---------

$values: 0px 4px 5px #666, 2px 6px 10px #999;

.app {
  @include box-shadow($values);
}

导入内容

Vue 组件有一个插槽概念，作用是可以让我们给组件提供 HTML 内容。导入内容的作用也是如此：

@mixin flex($justify: center, $align-content: center, $align-items: center) {
  display: flex;
  justify-content: $justify;
  align-content: $align-content;
  align-items: $align-items;
  // flex-direction: $flex-dir;
  // flex-wrap: $flex-wrap;
  @content;
}

删除flex-direction和flex-wrap，用@content代替样式，调用时再传递：

.app {
  @include flex($justify: flex-start) {
    flex-direction: row;
    flex-wrap: nowrap;
    // ... 其他样式也可以插入到内容中
  }
}

分享标题：Sass 混合指令——提高你的 CSS 重复使用率
本文来源：http://scjbc.cn/article/dsojsgc.html