Question

我使用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
}

对于像我这样使用大量渐变，roundCorners等的人来说，这很快就会增加。

问题（已编辑）

我发现此主题的已知名称是选择器继承（请参阅Sass），因为它似乎现在尚未实现。讨论了使用和优势here。此语法的计算css可能如下所示。

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

尽管如此，我还是会感谢任何建议，何时打扰以及何时不打算 - 以及任何其他主题提示如何继续，只要选择器继承不是一个选项。

Answer 1

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

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

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

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

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

Answer 2

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

这是一个较少网站的示例：

.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，但每次调用它时，都可以传递不同的属性。

希望这有帮助。

Answer 3

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

1 /实际生成的css除此之外还有一点，因为你可能永远不会看到它（除了调试你的代码少之外），所以如果在输出中有一些冗余，那么你会得到一个权衡我认为这是一种更好理解和维护的语法。

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

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

.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行。

Answer 4

这样的事情怎么样？

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

或者你可以考虑使用CSS缩小器，看看它是否给你一个可接受的大小而不影响你的LESS文件的清洁度。

Answer 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();
    ...
}

并且它不会生成未使用的块。

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

问题（已编辑）

5 个答案: