Question

这不是一个问题，而是我只想知道我对CSS中可重用类的理解是正确的。在这个例子中，我有2个div。我想向两者添加一个padding-left，但值不同。（例如div one的填充为10px，div2和padding为15px）。所以现在我想在一个较少的函数的帮助下编写可重用的css类。

示例1

<div id="div1" class="small-left-space">
</div>

<div id="div2" class="large-left-space">
</div>

// css and less

.padLeft(@value)
{
   padding-left: @value;
}

.small-left-space{
  .padLeft(10px);
 }


.large-left-space{
  .padLeft(100px);
 }

示例2

HTML

<div id="box1" class="bigBox redBackground smallLeftSpace "></div>

<div id="box2" class="mediumBox blueBackground mediumLeftSpace"></div>

<div id="box3" class="smallBox greenBackground largeLeftSpace"></div>

CSS /减

  .bigBox
 {
   width: 500px;
   height:500px;
 }

.mediumBox{
    width:300px
    height:300px;
}

.smallBox{
   width:100px
   height:100px;
}

.redBackground{
   .backgroundColor(red);
}

.blueBackground{
   .backgroundColor(blue); 
}

.greenBackground{
    .backgroundColor(green);
}

.smallLeftSpace{
     margin-left: 20px;
}

.mediumLeftSpace{
    margin-left: 50px;
}

.largeLeftSpace{
    margin-left: 100px;
}

.backgroundColor(@value){
   background-color: @value;
}

Answer 1

当您使用Less时，最好的办法是使用可重用的mixins 而不是可重用的类。它有几个优点：

如果没有使用mixin，它就没有编译，也没有出现在你生成的CSS中
你的HTML标记是干净的，语义的，没有很多化妆品类
你可以使用一个mixin（带参数），你可以使用几个CSS类

这是制作令人敬畏，干净且可重复使用的代码的方式。

示例：

减少文件数量，使用mixins：

/* Size */
.box(@value) {
    width: @value;
    height: @value;
}
.bigBox() {
    .box(500px);
}
.mediumBox() {
    .box(300px);
}
.smallBox() {
    .box(100px);
}

/* background-color */
.backgroundColor(@value){
    background-color: @value;
}

/* margin-left */
.leftSpace(@value) {
    margin-left: @value;
}
.smallLeftSpace() {
    .leftSpace(20px);
}
.mediumLeftSpace() {
    .leftSpace(50px);
}
.largeLeftSpace() {
    .leftSpace(100px);
}

#box2 {
    .mediumBox();
    .backgroundColor(blue);
    .mediumLeftSpace();
}
#box3 {
    .smallBox();
    .backgroundColor(green);
    .largeLeftSpace();
}

生成的CSS文件：

#box2 {
  width: 300px;
  height: 300px;
  background-color: #0000ff;
  margin-left: 50px;
}
#box3 {
  width: 100px;
  height: 100px;
  background-color: #008000;
  margin-left: 100px;
}

使用HTML标记，没有化妆品类：

<div id="box2"></div>
<div id="box3"></div>

如何在css中编写可重用的类

1 个答案: