转载

如何在 CSS 预处理器 Less 中使用 Mixins

原文地址: A Comprehensive Introduction to Less: Mixins

什么是 Mix

在 Less 中，我们可以定义一种叫 “mixins” 的东西 —— 和编程语言中的函数有一点的相似。在 Less 中，它被用来灵活的组件化 CSS 中可重复使用的 class。 Mixin 允许你把一个 class 的所有属性嵌入到另外的一个 class 中 —— 就像它的一个属性一样，仅仅通过简单的 include class 的名字。它仅仅是一个变量，但是拥有一个 class 的属性。任何的 CSS class 和 id 规则都可以混在里面。

.round-borders {   border-radius: 5px;   -moz-border-radius: 5px;   -webkit-border-radius: 5px; }  #menu {   color: gray;   .round-borders; }  // 输出 .round-borders {   border-radius: 5px;   -moz-border-radius: 5px;   -webkit-border-radius: 5px; }  #menu {   color: gray;   border-radius: 5px;   -moz-border-radius: 5px;   -webkit-border-radius: 5px; }

正如你所看见的一样，这个输出包含了 mixin 自己和整个 CSS 规则集。如果你不想 mixins 出现在你编译之后的 .css 文件中，你仅仅需要在 mixin 的名字后面添加空的括号。你可能想知道为什么我在 mixin 的名字中使用大写字母。这是因为 CSS 选择器也可以使用点符号, 所以没有办法区分是不是来自于一个 mixin。这也正是我使用大写字母的原因，同样的在面对对象编程中，我们经过对 class 使用大写字母。

请带好你的参数

Mixins 可以携带参数，这就意味着它可以通过携带参数来提高他们的效率。携带参数的 mixin 在编译的时候不会输出本身。它的属性将输出在调用它的模块中。典型的例子是创建一个在多个浏览器中都能使用的圆角 mixin

.round-borders (@radius) {   border-radius: @radius;   -moz-border-radius: @radius;   -webkit-border-radius: @radius; }

下面展示了我们如何使它 :

header {   .round-borders(4px); }  .button {   .round-borders(6px); }

携带参数的 mixins 也可以拥有默认的参数：

.round-borders (@radius: 5px) {   border-radius: @radius;   -moz-border-radius: @radius;   -webkit-border-radius: @radius; }

现在我们可以这样引用它：

header {   .round-borders; }

它将会引入一个 5px 的 border-radius 。

如果你要用一个没有任何参数的 mixin, 并且你不想让他输出在编译后的文件中，就给他一个空的参数吧，像下面这样：

.hiddenMixin() {   color: black; }

p {   .hiddenMixin() }

将会输出这样的结果：

p {   color: black; }

mixin 中有 @arguments 这样一个特殊的变量，它包含着所有传给这个 mixin 的参数（如果没有传递参数就使用申明的默认参数）。该参数的值是所有参数的值中间用空格分开构成的。使用 @argument 是一个有用的快速分配所有参数的技巧。

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {   box-shadow: @arguments;   -moz-box-shadow: @arguments;   -webkit-box-shadow: @arguments; }  .box-shadow(2px, 5px);

输出结果将是这样：

box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000;

一个小小的配对:)

如果你在同一个作用域中有多个相同名字的 mixin, 将会检查它们的参数是否匹配。

最简单的例子就是匹配参数个数不同的 mixin。只有那个参数个数相同的 mixin 才会被匹配，这儿也有一个例外：参数个数为 0 的 mixin 总是会被使用。

下面就是一个简单的例子：

.mixin() { // this is always included   background-color: white; }  .mixin(@a)  {   color: @a; }  .mixin(@a, @b) {   color: fade(@a, @b); }

现在我们可以用一个单一参数来调用 .mixin 。我们将会得到第一个定义的输出，但是如果我们用两个参数来调用 .mixin ，那么我们将会得到第二个定义的输出： @a 到 @b 的淡入。

另外一种控制 mixin 匹配的方式是在申明 mixin 的时候指定一个词：

.mixin (dark, @color) {   color: darken(@color, 10%); }  .mixin (light, @color) {   color: lighten(@color, 10%); }  .mixin (@_, @color) { // this is always included   display: block; }  @switch: light;  .class {   .mixin(@switch, #888); }

我们将得到下面的输出：

.class {   color: #a2a2a2;   display: block; }

上面的例子中通过 mixin 传递出来的颜色的 lighted 的。如果 @switvh 的值是 dark, 其结果将会是 dark。只有被匹配到的 mixin 定义才会被使用。变量可以去匹配任意值， and anything other than a variable matches only with a value equal to itself.

守卫

另外一种制约多个 mixin 同时使用的方法是使用 guards。它是一个特殊的表达式，和 mixin 的申明联合起来使用。他必须在 mixin 使用之前是真实的。当你想匹配表达式的时候，使用 gurads 往往是有用的。

在开始使用 guards 的时候，我们是从 when 这个关键词开始的:

.mixin (@a) when (lightness(@a) >= 50%) {      background-color: black; }  .mixin (@a) when (lightness(@a) < 50%) {   background-color: white; }  .mixin (@a) { // this is always included   color: @a; }  .class1 {   .mixin(#ddd); } // this matches the first mixin  .class2 {   .mixin(#555); } // this matches the second mixin

我们将会得到这样的结果:

.class1 {   background-color: black;   color: #ddd; }  .class2 {   background-color: white;   color: #555; }

在 guards 中支持的操作符有 >, >=, =, 等

既然我们如此对 TA 执迷，那么如何去追寻更好的 TA ?

这儿有一些小小的奖励给你。他是一些和 Less 有关资源的一些列表，你可以按照你的意愿在你的项目中去使用它们。同时，这里也有一些使用 mixins 和变量的小项目供你参考

Official Less documentation — 可以尝试在你的项目中去使用它:) 当然，你也应该定期检查他的更新和新的特性
Less Elements — 比较好用的 mixins 的收集
Preboot.less —另外一个 mixins 和变量使用的收集
Semantic Grid System —一个简单方便的页面布局工具。它支持 fixed布局, 流式布局, 和响应式布局。并且你可以在使用它的时候使用 sass 和 stylus (如果你对 Less 爱的还不是那么深沉的情况下)
Centage —if you need full fluidity and flexibility, you should definitely check this.
perkins CSS3 Less Framework —一个非常好的 less 开发的框架，使用了HTML5和CSS3