使用 LESS 创建智能实用程序填充和边距类？

Question

我觉得有一种方法可以创建一组更智能的实用程序类，然后我可以将<div class="margin-top-6"> 之类的类添加到 HTML 本身的标签中，LESS 将能够使用它运行并应用一个 CSS 规则，将在该元素的顶部添加 6px 的边距。

这可能吗？

我非常相信更聪明地工作而不是更努力地工作，但现在我有一个疯狂的笨拙，感觉如果有更多的 LESS 知识，它可能会更聪明。

所以我想知道是否有更好的东西。这是我所拥有的填充部分的示例。完整的代码重复如下，每个类集最多 25px，但如果限制完全灵活的设置会很棒。我在想一些带有变量或混合的东西，或者你会有一个看起来像 .padding-@var1-@var2 的 LESS 规则的东西，然后检查 vars 是否存在，如果存在，它们是什么，然后......等等。

少

.padding {

    &-1  { padding:  1px !important; }
    &-2  { padding:  2px !important; }
    &-3  { padding:  3px !important; }
    &-...

    &-height-1  { padding-top:  1px !important; padding-bottom:  1px !important; }
    &-height-2  { padding-top:  2px !important; padding-bottom:  2px !important; }
    &-height-3  { padding-top:  3px !important; padding-bottom:  3px !important; }
    &-...

    &-top-1  { padding-top:  1px !important; }
    &-top-2  { padding-top:  2px !important; }
    &-top-3  { padding-top:  3px !important; }
    &-...

    &-bottom-1  { padding-bottom:  1px !important; }
    &-bottom-2  { padding-bottom:  2px !important; }
    &-bottom-3  { padding-bottom:  3px !important; }
    &-...

    &-width-1  { padding-right:  1px !important; padding-left:  1px !important; }
    &-width-2  { padding-right:  2px !important; padding-left:  2px !important; }
    &-width-3  { padding-right:  3px !important; padding-left:  3px !important; }
    &-...

    &-right-1  { padding-right:  1px !important; }
    &-right-2  { padding-right:  2px !important; }
    &-right-3  { padding-right:  3px !important; }
    &-...

    &-left-1  { padding-left:  1px !important; }
    &-left-2  { padding-left:  2px !important; }
    &-left-3  { padding-left:  3px !important; }
    &-...


}

HTML 用途：

<div class="listItem margin-top-6 padding-width-14">
    ...content here...
</div>

---

有什么想法吗？

非常感谢大家的时间和想法！

Answer 1

很抱歉打断了你，但这是工作更难而不是更聪明。

为什么要费力生成大量的 CSS 类来对元素的盒子模型进行微调？只需使用 HTML 的内置特性：style 属性。

代替：

<div class="listItem margin-top-6 padding-width-14">
    ...content here...
</div>

你可以这样做：

<div class="listItem" style="margin-top: 6px; padding: 0 14px;">
    ...content here...
</div>

...而且不必生成任何神奇的类。

如果你想更聪明地工作，你可以将这些微调整移动到一个 CSS 文件中，将它们附加到一个有意义的类名上：

<div class="listItem listItem-special">
    ...content here...
</div>

然后，您可以使用 LESS（即parametric mixins）的强大功能来缩短您需要编写的 CSS：

.listItem-special {
  .padding-width(4);
  margin-top:6px;
}

这是上面使用的混合：

.padding-width(@width){
  padding-left: (@width)px;
  padding-right: (@width)px;
}

通过类名listItem-special 抽象出您的样式，您可以在标记中的多个位置重复使用这些样式。此外，当您需要在整个站点中更改 listItem-special 的样式时，您只需更新该类的 CSS 定义！

将样式与标记分开通常被认为是一种最佳做法。关于这个主题有很多资源。 Here's one from Smashing Magazine。