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

Question

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

这可能吗？

我非常相信更聪明地工作而不是更努力地工作，但现在我有一个疯狂的笨拙，感觉它可以通过少一点知识来变得更聪明。

所以我想知道是否有更好的东西。这是我所拥有的填充部分的示例。完整的代码就像下面一样重复，每个类集最多 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 .