Question

我正在寻找LESS，因为我肯定会看到他们的一些好处。例如颜色声明。

我不明白的一件事，也许我没有得到正确的流程是 - 为什么使用以下LESS片段

.radius {
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;  
}
.btn-red{
  background-color:red;
  .radius;     
}
.btn-green{
  background-color:green;
  .radius;
}
...

当我们可以立即使用html文件中的.radius类时。我留下的印象是LESS在编译后会添加大量重复的代码。

我正在使用以下内容，这更有意义。与font-size，margin等相同......在这种情况下不使用类吗？

<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>

Answer 1

上面的代码段并没有受益于SASS / LESS功能。让我们仔细看看并查看这个SCSS片段。

// Abstract placeholder.
%radius {
  border-radius: 5px;
}

// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {

  // Color modifier.
  &-red {
    @extend %radius;
    background-color: red;
  }
  &-green {
    @extend %radius;
    background-color: green;
  }
}

CSS输出将是：

.btn-red, .btn-green {
  border-radius: 5px;
}

.btn-red {
  background-color: red;
}
.btn-green {
  background-color: green;
}

然后你必须选择Autoprefixer并且供应商前缀问题一劳永逸地解决。

Answer 2

因为现在，您只需指定班级btn_red或btn_green，所有按钮都会自动生成半径。

您的HTML应该只包含语义，并且样式或引用样式的类不应该是它的一部分。

这也适用于其他类。例如，如果您要将btn_red重命名为btn_cancel，则您有一个有意义的类名，可以应用于任何类型的取消按钮。在CSS中，您可以指定取消按钮为红色，并且可以指定“取消”按钮。按钮为绿色，两者都有半径，根本不需要修改HTML。

因此，最终目标是让HTML描述结构，CSS描述该结构的外观。一个CSS预处理器只是他们制作一个庞大的意大利面条式CSS文件更有条理。

Answer 3

有几个好处。

您可以使用更多语义类名称。您可以使用单个类来传达样式的用法，而不是其内容，而不是直接在类名（btn-red，radius）中编码样式信息。
您可以避免重复自己。 @radius-size: 5px; -webkit-border-radius:@radius-size; -moz-border-radius:@radius-size; border-radius:@radius-size;
您可以对其进行参数化，以便您能够在不同的上下文中使用不同的半径（半径？）。 .radius(@radius-size) { ... }

Answer 4

因为有些情况下开发人员无法访问或者不想更改标记。唯一的解决方案是包含预定义类中的所有道具。

例如：

您已加载引导程序（然后您已经拥有.has-success和.has-error类）并且如果您想使用输入的:valid和:invalid状态来使用HTML5的本机表单验证，您必须使用JavaScript根据输入的状态添加/删除成功/错误类。但是有了LESS的这个功能，你可以在输入状态中包含所有成功/错误类的道具。这个例子的代码可能是这样的：

#myinput {
    &:valid { .has-success; }
    &:invalid { .has-error; }
}

混合与类相比较少

4 个答案: