1

我想用 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，但我看到在引导程序上大量使用它，我认为这是可以实现的。我测试了一些东西，但看起来这是一个高级场景，因为没有一个教程涵盖它。

谢谢！

4

1 回答 1

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);

必要时进一步参数化。

于 2013-08-12T21:58:58.497 回答