Question

我想用LESS来完成这个css（并且为了简洁起见不再发布），所以我可以有更多的控制和自动创建类。不确定LESS可以帮助我多少钱。

.m-xs {
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}
.m-t-xs{
    margin-top: 5px;    
}
.m-r-xs{
    margin-right: 5px;
}
.m-b-xs{
    margin-bottom: 5px;
}
.m-l-xs{
    margin-left: 5px;
}
.m-h-xs{
    margin-right: 5px;
    margin-left: 5px;   
}
.m-v-xs{
    margin-top: 5px;
    margin-bottom: 5px;
}

我希望重复几种尺寸（xs，s，m，l，xl等）以及其他属性（如填充）。

我怎么能用less来做这种'autocreate'的事呢？甚至可以不写所有课程？我从未使用过LESS，但我看到它在bootstrap上的大量使用，我认为这可以实现。我测试了一些东西，但看起来它是一个高级场景，因为没有一个教程覆盖它。

谢谢！

Answer 1

要生成您在那里提到的类，您可以尝试参数化mixins：

.classes (@size) {
  .m-@{size} {
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
  }

  .m-t-@{size}{
    margin-top: 5px;      
  }

  .m-r-@{size} {
    margin-right: 5px;
  }

  .m-b-@{size} {
    margin-bottom: 5px;
  }

  .m-l-@{size} {
    margin-left: 5px;
  }

  .m-h-@{size} {
    margin-right: 5px;
    margin-left: 5px;   
  }

  .m-v-@{size} {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.classes(xs);
.classes(s);
.classes(m);
.classes(l);
.classes(xl);

根据需要进一步参数化。

使用LESS函数创建多个类

1 个答案: