13518219792
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;
// ... 其他样式也可以插入到内容中
}
}
