liuhui_is_me

Sass 基础: Sass Mixin 指令

原文链接: www.sitepoint.com

Sass Mixins

为深入而简明的了解SASS,SitePoint为其所有高级会员提供SASS这本书籍,来自sass支持者Hugo Giraudel。或者,你也可以只花19美元就能买到一本。

_ 本文首先出现在SitePoint 在2015年,在此出现在2017年6月14日并做了以下一些小的修正和修改 _

对于我发现Sass是一个意外的事情。在很长一段时间里,我厌倦了写普通的CSS。对于一个小网站来说,它很好,但对于较大的站点,CSS很快就失控了。调试是一场噩梦,我忍不住的觉得我可以用CSS做更多的工作。

我关注Sass的一切动向。通过Sass我能分解我的CSS成模块化块,使故障排除的更加容易。在创建CSS时,我还可以使用编程概念,如函数和变量。最重要的是来向我介绍了Sass Mixin。

Sass Mixin 是什么?

Mixin 可以让你创建可重用的css模块,避免书写重复的代码. 例如:

a:link { color: white; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }

一次又一次地编写这些代码可以很快就过时了,尤其是如果你有一个拥有大量链接的大型站点。你可以为这样的链接创建样式通过Mixin:

@mixin linx ($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;   
    }
    &:active {
      color: $active;
    }
  }
}

怎样引入Sass Mixin

直接把混合放入到你的sass 文件中就可以了,引用上面创建的linx 指令你可以这么做:

`@include linx(white, blue, green, red);`

@include指令用来引入mixins到sass文件中。

怎么样创建Sass Mixin

通过@mixin指令创建

@mixin sample {
  font-size: 12px;
}

通过@mixin指令创建,你也可以引入写变量,像上面的linx的例子一样。

可以在mixin中使用变量,你想使用$font-base这个变量,你只需要在mixin中定义就好了:

$font-base: 12px;

@mixin sample {
  font-size: $font-base;
}

p {
  @include sample;
}

生成的CSS如下:

p {
  font-size: 12px;
}

Sass Mixins 参数

mixin使用sass的数据值作为参数。当你使用@include引入mixin的时候,这些值就被赋值了相关的值。这些参数作为mixin的变量。参数定义在mixin的名字之后,以逗号分隔:

@mixin headline ($color, $size) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline(green, 12px);
}

编译为:

h1 {
  color: green;   
  font-size: 12px;
}

当我们使用基本参数的时候,一定要按照变量指定顺序的顺序。像下面的方式,编译的css将是不合符规则的:

h1 {
  @include headline(12px, green);
}

h1 {
  color: 12px;
  font-size: green;
}

你可以明白了,mixin只是按照你定义的顺序传递参数,并没有生成多余的css代码。

你也可以使用Sass变量当做参数。如设置$base-color变量:

$base-color: pink;

@mixin headline($color, $size) {
  color: $color;
  font-size: $size;
}

h1 { @include headline($base-color, 12px);}

编译:

h1 {
  color: pink;
  font-size: 12px;
}

Sass Mixins的默认值

当我们创建mixin指定默认的数组作为参数的时候。那么当我们引入mixin的时候,默认值将会被继承下来。如下,如果你更新headline mixin:

@mixin headline($size, $color: red) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline(12px);
}

h1 {
  @include headline(12px, blue);
}

编译为:

h1 {
  color: red;
  font-size: 12px;
}
h1 {
  color: blue;
  font-size: 12px;
}

第一个H1你只指定一个像素大小,所以mixin使用其红色的默认值。在第二个例子中,您提供了一个显式的颜色值,蓝色,从而取代了默认值“红色”。注意,你必须改变参数的顺序为Sass要所必须的。因为$color参数具有默认值,所以在引入中颜色是可选的。还可以将变量指定为默认值:

$base-color: orange;

@mixin headline($size, $color: $base-color) {
  color: $color;
  font-size: $size;
}

Sass Mixins 的关键参数

您也可以选择你的mixin包含关键字参数。即使使用关键字参数可能使代码不那么简洁,但它也也提高可读性,如果其他人将维护您编写的代码,这将是非常重要的。可以以任何顺序包含关键字参数,当然可以省略默认值:

@mixin headline($size, $color: red) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline($color: blue, $size: 12px);
}

编译为。

h1 {
  color: blue;
  font-size: 12px;
}

Sass Mixins 中的变量参数

有时你可能需要你的mixin接受许多参数。例如,padding属性可以有一到四个参数。在这种情况下,你可以创建一个mixin使用可变参数。变量参数允许您将参数打包为列表。除了他们在最后添加(...)之外,其他与普通的一样:

@mixin pad ($pads...) {
  padding: $pads;
}

.one {
  @include pad(20px);
}
.two {
  @include pad(10px 20px);
}
.three {
  @include pad(10px 20px 40px);
}
.four {
  @include pad(10px 20px 30px 20px);
}

编译为:

.one {
  padding: 20px;
}
.two {
  padding: 10px 20px;
}
.three {
  padding: 10px 20px 40px;
}
.four {
  padding: 10px 20px 30px 20px;
}

你可以引入常规的参数在变参旁边。

@mixin pad ($color,$pads...) {
  color: $color;
  padding: $pads;
}
.four { @include pad(orange, 10px 20px 30px 20px); }

编译为:

.four {
  color: orange;
  padding: 10px 20px 30px 20px;
}

正则参数必须出现在变量参数之前。如您所见,剩余的参数被打包并用于填充值。当你引入mixin,你也可以使用变量参数。对于参数,可以从一个值列表或一个映射列表中提取:

$box-style1: 5px, solid, red;
$box-style2: (bStyle: dotted, bColor: blue, bWidth: medium);

@mixin boxy($bWidth, $bStyle, $bColor) {
  border-width: $bWidth;
  border-style: $bStyle;
  border-color: $bColor;
}

.first {
  @include boxy($box-style1...);
}

.second {
  @include boxy($box-style2...);
}

你可以看到,你已经设置了的列表和映射为你你的mixin。当使用列表时,参数必须以正确的顺序排列。使用map时,顺序无关紧要,因为map值将被视为关键字参数。正如您所看到的,map值的顺序是错误的,但是您仍然得到正确的CSS代码:

.first {
  border-width: 5px;
  border-style: solid;
  border-color: red;
}

.second {
  border-width: medium;
  border-style: dotted;
  border-color: blue;
}

@content

通过@content指令你可以引入没有定义在mixin中的样式。增加的样式将会出现在mixin中的有@content关键字的地方:

@mixin cont {
  background-color: black;
  color: white;
  @content;
}

额外的样式将会这样添加进去:

div {
  @include cont {
    font-size: 12px;
    font-style: italic;
  }
}

div {
  background-color: black;
  color: white;
  font-size: 12px;
  font-style: italic;
}

如您所见,上面添加的font-sizefont-style样式已经与编译后的CSS代码相关。@content指令允许您根据需要设置基本样式和自定义。

总结

你可以看到,mixin是非常有用的sass指令。有这么多的技巧让你可以完成mixin来加快你的工作流程。SASS mixin更多的信息:mixin或占位符作者Hugo Giraoudel与sass 文档

你最喜欢的sass mixin是什么?请在评论中分享。