[译] Less 中的 extend 和 mixins 对比

原文地址：http://transmission.vehikl.com/less-extend/

如果你曾经使用过 Less，你一定借助过 mixins 的力量来减少样式表中的重复劳动（DRY）。

也许你有如下的标准按钮样式：

.btn {
  background: blue;
  color: white;
}

下面你想要把这些样式包含在一个更具体的按钮中。

你可以使用 mixins 来方便的将一个类混合到另一个类中，这可以让你不通过复制粘贴来复用这些样式。

.round-button {
  .btn;
  border-radius: 4px;
}

无论如何不要做重复劳动（DRY）

上面的用法乍看起来是成功的，但是如果你仔细研究编译好的 CSS 就会发现一些浪费空间的重复语句：

.btn {
  background: blue;
  color: white;
}

.round-button {
  background: blue;
  color: white;
  border-radius: 4px;
}

注意 .btn 类中的样式是如何仅被拷贝到 .round-button 类中的？

标准 CSS 允许我们对选择器进行分类，所以我们实际上可以用更少的代码来手写这个样式表：

.btn,
.round-button {
  background: blue;
  color: white;
}

.round-button {
  border-radius: 4px;
}

那么这是怎么回事？如果 Less 应该比 CSS 好得多，那么它为什么不会智能的利用 CSS 默认提供的这个节约代码的重要特性？

Extend

这是一个合理的抱怨，也是许多人选择 Sass 来替代 Less 的一大原因。但在 1.4 版本中，Less 添加了 extend 语法，优雅的解决了这个问题。

通过像下面这样改写我们原始的 Less 代码：

.btn {
  background: blue;
  color: white;
}

.round-button {
  &:extend(.btn);
  border-radius: 4px;
}

我们可以得到下面的输出，这正是我们手写过的代码：

.btn,
.round-button {
  background: blue;
  color: white;
}

.round-button {
  border-radius: 4px;
}

特别注意

嵌套的选择器

默认情况下，嵌套的选择器不会被扩展，所以下面的代码：

.footer {
  padding: 20px;
  h2 {
    color: white;
  }
}

.feed {
  &:extend(.footer);
}

会被编译成如下 CSS，.feed 类下的 h2 会被忽略：

.footer,
.feed {
  padding: 20px;
}

.footer h2 {
  color: white;
}

你可以通过使用 all 关键字来使 Less 包含所有嵌套的选择器：

.feed {
  &:extend(.footer all);
}

上面的代码可以给出你期望的结果：

.footer,
.feed {
  padding: 20px;
}

.footer h2,
feed h2 {
  color: white;
}

你也可以使用一个特定的嵌套选择器：

.feed {
  &:extend(.footer h2);
}

媒体查询

extend 只会扩展在同一个媒体查询中的选择器。

下面的代码是有效的：

@media (max-width: 1024px) {
  .feed {
    padding: 20px;
  }
  .sig {
    &:extend(.feed);
  }
}

而下面的是无效的：

.feed {
  padding: 20px;
}

@media (max-width: 1024px) {
  .sig {
    &:extend(.feed);
  }
}

那么 mixins 该怎么使用

太棒了！但是如果 extend 是更好的选择，我们还需要 mixins 吗？

参数化的 mixins

当你只是需要在几个类之间共享静态样式时，extend 是你不二的选择，但是当你需要添加动态样式时，就必须使用 mixins 了。

我们还是来谈谈按钮吧，假如我们有如下代码：

.btn {
  background: #217a39;
  border: 1px solid #0f3c1c;
  border-radius: 4px;
  color: #fff;
  &:hover {
    background: #3eb061;
    border-color: #165929;
  }
}

上面的代码生成了一个很酷的绿色小按钮，还有一个漂亮的鼠标滑过效果。

现在，如果我们想复用这个按钮，但要给按钮设置一个不同的颜色该怎么办？entend 在这里真的帮不到我们，但 mixins 可以轻而易举的完成：

.btn(@color) {
  background: @color;
  border: 1px solid darken(@color, 15);
  border-radius: 4px;
  color: #fff;
  &:hover {
    background: lighten(@color, 10);
    border-color: darken(@color, 5);
  }
}

使用上面的 mixin，我们可以定义很方便的定义一系列不同的按钮：

.btn-success {
  .btn(#18682f);
}

.btn-alert {
  .btn(#9b6910);
}

.btn-error {
  .btn(#9b261a);
}

总结

无论在哪里你使用了静态的 mixins，都可以用 extened 来替换，这能够有效减少文件大小。只在当你需要传递一个参数的时候，才保留这个 mixins。