Question

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

这可能吗？

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

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

LESS

.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。

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

LESS

HTML使用：

1 个答案: