首页 > 其他分享> 文章详细

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

2022-08-21 20:04:22 阅读：188 来源： 互联网

标签：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
来源： https://www.cnblogs.com/Enziandom/p/16610662.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9