CSS中的LESS.JS冗余，使用Mixins而不是选择器继承？答案

【问题标题】：LESS.JS Redundancy in CSS, Use of Mixins instead of selector inheritance?CSS中的LESS.JS冗余，使用Mixins而不是选择器继承？
【发布时间】：2011-09-26 15:41:03
【问题描述】：

我正在使用 less.js 并经常使用 mixins。例如。我确实有一个像这样的基本类“gradientBlack”。

.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}

然后我在几个定义中重用这个类，比如

h3 {
    .gradientBlack;
    ...
}
.darkBox {
    .gradientBlack;
    ...
}

这种方法的一个缺点是，它使用冗余定义使 CSS 膨胀。例如。计算出的 CSS 可能与此类似。

h3 {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    //... and maybe some more (redundant) definitions

}

.darkBox {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    //... and maybe some more (redundant) definitions
}

对于像我这样使用大量渐变、圆角等的人来说，这加起来很快。

问题（已编辑）

我发现这个主题的已知名称是选择器继承（请参阅Sass），现在似乎还没有实现。用法和优点讨论here。此语法的计算 css 可能如下所示。

h3,
.darkBox,
.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    ...
}

尽管如此，我将不胜感激任何建议，什么时候打扰，什么时候不打扰 - 以及任何其他主题提示如何继续，只要选择器继承不是一个选项。

【问题讨论】：

恕我直言，您提出的预期结果对我来说真的没有意义，因为它只是常规的 CSS。请说明您想要实现的目标...
嗨，bzx。是的，它是普通的CSS。但是比手写要容易得多。如果……就像上面的工作一样，我的类定义将始终保留在一个地方，而不是分散在各个地方（例如渐变、圆角、文本阴影等）。因此，掌握和更改布局会容易得多，而后者可以在不添加和/或删除我的（可能是复杂的）选择器的情况下在不同的地方完成。迎接阳光。

标签： css coding-style syntax less

【解决方案1】：

我认为有几个问题需要考虑：

样式表的大小
样式表执行效率（浏览器执行速度）
样式表的可维护性
标记 (html) 的可维护性

Mark Gemmill（在 /3 中）提倡的方法实际上是 Nicole Sullivan's Object Oriented CSS。我在切换到 Sass 之前使用了该模式，并且仍然发现其中一些有用，但我认为 Sass/Less 的方式会导致更可维护的 CSS 和更可维护的标记 - 无需在整个标记中添加演示类。

我认为@extend（选择器继承）是 Sass 相对于 Less 的主要优势之一，并且确实减少了编译样式表中的冗余。

对我来说，更易于维护的 CSS 和标记的好处超过了稍微大一点的样式表的任何缺点。我想你会发现，如果你保留你的 selectors efficient（不要嵌套在 Less/Sass 中超出你的需要）并在生产中组合和最小化，那么性能损失将比你想象的要小。

【讨论】：

【解决方案2】：

你可以定义你的 mixin，然后传入你想要在调用它时覆盖的变量。

这是 less 网站的示例：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);

  box-shadow:         @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
}

所以当你调用它时，你可以做类似的事情

div.header {
  .box-shadow(5px,5px,2px,.5);
}

这样你可以有1个mixin，但是每次调用它时，你可以传递不同的属性。

希望这会有所帮助。

【讨论】：

嗨 Garrett，感谢您的回复，但不幸的是，参数化的 mixins 不是我想要的。无论如何，谢谢。

【解决方案3】：

我最近也开始使用less css，我也想到了这个确切的问题。我的回答是：

1/ 实际生成的 css 有点多余，因为您可能永远不会查看它（除了可能调试较少的代码），因此如果输出中有一些冗余，您会得到权衡我认为这是一种更易于理解和维护的语法。

2/ 正如您所描述的，缺点是，如果您将那些 less css 类样式作为 mixin 传递，那么您的 css 输出的大小就会膨胀。如果您在前端使用less css，并且它在浏览器中生成 css，则不用担心。但是，如果您正在预生成您的 css，那么就会成为膨胀如何影响下载时间的问题。除非您的 css 文件因此变得很大，和/或您的网站的容量非常大，否则我不会担心。

3/ 在less css 中将类样式作为mixin（或使用选择器继承）传递的另一种方法是在您的html 中使用class inheritance，而不是在您的less 文件中使用这个：

.gradientBlack {
    ...
}

h3 {
    .gradientBlack;
    ...
}
.darkBox {
    .gradientBlack;
    ...
}
td.dark {
    .gradientBlack;
    ...
}

您只需在样式表中定义.gradientBlack，然后直接在html中引用该类：

<h3 class="gradientBlack"></h3>
<div class="darkBox gradientBlack></div>
<td class="dark gradientBlack"></td>

我认为最后，除了下载时间问题之外，最重要的是使您的代码在特定情况下更易于理解和维护。如果我的less css 更容易理解，我宁愿在生成的 css 中多写 100 行。

【讨论】：

谢谢，为你帮助马克。这是你和steveax之间的一次近距离接触。我希望，你不要太介意。不幸的是，我无法在你们两个之间分配赏金（meta.stackexchange.com/questions/2786/…）：/

【解决方案4】：

这样的事情呢？

h3, .darkBox, td.dark {
    .gradientBlack;
}
h3, {
    /*other styles here*/
}
.darkBox {
    /*other styles here*/
}
td.dark {
    /*other styles here*/
}

或者，您可以考虑使用 CSS 缩小器，看看它是否可以在不影响 LESS 文件的清洁度的情况下为您提供可接受的大小。

【讨论】：

在实践中，恕我直言，这种方法确实会降低 CSS 的可维护性。如果共享共同样式的元素位于样式表的完全不同的部分怎么办？你做什么工作？你只是提升所有的规则类样式吗？只是将类的样式拆分在样式表的不同部分？任何一种方法都部分地破坏了组织利益。

【解决方案5】：

我使用的是 lessphp（在本例中可能与 less.js 不同），但我注意到如果我将 mixin 声明为好像它有一个空参数列表，它将永远不会生成样式块。

所以改变这个：

.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}

到这里：

.gradientBlack() {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}

并像这样使用它：

h3 {
    .gradientBlack();
    ...
}
.darkBox {
    .gradientBlack();
    ...
}

它不会生成未使用的块。

【讨论】：