LESS mixins vs类 [英] LESS mixins vs classes

问题描述

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

I'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.

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

One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet

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

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

When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.

我使用以下，这更有意义。与字体大小，边距等相同...在这种情况下不使用类吗？

I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?

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

推荐答案

上述代码段不能受益于SASS / LESS功能那么多。让我们仔细查看并检查此SCSS代码段。

The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.

// 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的输出将是：

The CSS output will be:

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

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

然后你必须拿起的 Autoprefixer 和供应商前缀的问题是一劳永逸解决。

And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.

这篇关于LESS mixins vs类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！