Sass & Compass 教程 -- 语法篇(二)

发表于
| 字数统计 1,017

阅读本篇你将收获

  • 使用混合器封装重用的样式。
  • 使用选择器继承减少样式重复。
  • 从视觉效果的角度出发描述元素。

5. 混合器@mixin

如果读者曾经接触过 Less，那么这个概念你一定不会陌生。就如同 JS 中的函数一样，在样式的世界里，我们将重复使用的属性、规则包装在一个混合器中，并用 @mixin 来声明，然后在需要的地方，使用 @include 调用。先让我们来一个例子，直观的感受一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@mixin no-bullets {
  list-style: none;
   li {
     list-style: {
       image: none;
       type: none;
     }
     margin: 0;
   }
}

ul.plain {
  @include no-bullets;
}

// 编译成CSS
ul.plain {
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin: 0;
}

使用混合器最终目的是让它返回一堆属性和规则。
同时，我们还可以给它传递参数，使它输出不同的结果。
就如同 js 中函数的参数一样，混合器的参数其实就是在混合器内部声明的局部变量，我们可以在声明时给参数附上默认值。
而在调用混合器时，采用模式匹配给参数赋值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@mixin link-colors($normal,$hover:$normal,$visited:$normal) {
  color: $normal;
  &:hover { color: $hover; }  // 给参数附上默认值
  &:visited { color: $visited; }
}

a {
  @include link-colors($normal: red,$hover: blue);
}

// 编译后的CSS
a {
  color: red;
}
a:hover {
  color: blue;
}
a:visited {
  color: red;
}

混合器很强大，就如同函数在 js 中一样的地位一样。然而无休止的滥用混合器会导致项目难以维护。

When you have only one hammer in your hand, you tend to look at all the problems as nails.
—— Maslow

一条经验法则：你能否为这个混合器找到一个短名字来描述这些属性修饰的样式。

对于混合器的命名，应该带有展示性的描述，侧重于表达当应用了这个样式后所带来的视觉效果。比如：”fancy-font”。这与CSS类名有所不同，两者容易混淆。

一种主流的命名方法：CSS类名使用语义化的描述，混合器的名字则采用展示性的描述。

鉴于上面的命名方法，我们得出，混合器的最佳使用点是封装重用的展示性样式。

6. 选择器继承 @extend

先看下面例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// SASS
.error {
  border: 1px red solid;
  color: red;
  background: #fff;
}
.danger-error {
  @extend .error;
  color: #fff;
  background: red;
  font-size: 1.8em;
}

// CSS
.error, .danger-error {
  border: 1px red solid;
  color: red;
  background: #fff;
}

.danger-error {
  color: #fff;
  background: red;
  font-size: 1.8em;
}

SASS 使用 @extend 来实现选择器继承。
它背后的基本原理是，如果 A 继承于 B ，那么在样式表的任何一处 B 都将会被 A，B 这一选择器组替换。

继承是基于选择器的，常常是基于类选择器，上面说到类的命名应当是语义化的，因此，继承也是建立在语义化的关系上。就好比当你在编写样式时发现一个类是另一个类的细化的时候，比如上面.danger-error 是 .error的细化。

同样的目的我们可以使用混合器来解决，然而混合器的使用会复制大段的代码，并且混合器的命名也会违背上面的原则，对此更好的解决方案是使用继承，上面的例子可以看出，继承只会增加选择器的数量，不会复制大量属性代码。

想要熟练的使用混合器与继承，需要日常反复练习，在实践中体会二者的侧重，这里笔者给出一条经验法则：为效果而混合，为逻辑而继承。

本文作者：She Liu
系列教程： Sass & Compass 教程
参考文献：《SASS and Compass IN ACTION》 [美] Wynn Netherland