标签：flex Sass align content 指令参数 wrap 使用率 CSS

前言

Sass（Scss）支持混合指令，姑且看作是函数一样的东西，可以传递参数、传递参数变量、参数默认值等。它也支持自定义函数，可以说是真正意义上的函数，可以返回值，也有混合指令的特性。

要高效地管理和使用 CSS 样式，除了要掌握嵌套使用以外还要掌握混合指令、函数、变量。

混合指令

如何定义混合指令

下面是混合指令的定义语法规则：

@mixin name {
 // ...
}

混合指令的作用就是重复使用一堆 CSS 样式，减少我们重复写的次数，只需要调用混合指令就可以完成工作。比如，垂直水平居中这样的样式是我们经常使用的，所以：

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

如何调用混合指令

下面是调用混合指令的语法规则：

@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;
}

（1）元素超出内容时允许换行：

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

（2）元素靠左对齐

.app {
  @include flex(flex-start, 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);
}

其余的参数都可以不传递，直接使用默认值。但是，只想对中间的某一个参数传递值呢？这时候就要用到关键词参数了。

关键词参数

关键词参数的作用就是，只对混合指令中某一个具体的参数进行传递，其余的参数我们不管，要用默认值的就用，不影响。这根按照顺序坐座位和拿着座位号对号入座的一样，关键词参数就是拿着座位号对号入座，而不影响其他参数。然而，按照顺序坐座位一旦发生一些错误就导致后面都错乱。

.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 组件有一个插槽概念，如果不给组件弄插槽，我们定义好的组件内部插入一些其他标签内容是不会显示在页面上的（我已经验证过了，百分之百可信）。导入内容其实就相当于向混合指令添加样式到混合指令内部。

@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;
}

去除掉最后两个参数以及样式，这两个样式在我们调用混合指令时插入进来：

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

标签：flex,Sass,align,content,指令,参数,wrap,使用率,CSS
From： https://www.cnblogs.com/Enziandom/p/16610662.html

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

前言