为LESS提供智能保证金

Question

我为LESS CSS创建了一个.smartMargin() mixin，用于响应式设计LESS。

我在这里分享它是为了别人的利益，也因为我很好奇是否有任何方法可以提高效率。

观

mixin旨在从另一个mixin中调用，表示响应式设计断点。我们的想法是，您可能希望通过覆盖每个连续断点中的一个或多个边距来单独覆盖顶部，左侧，底部，右侧边距。

在主mixin中，我只需要@videoMargin的一个参数而不是@videoMarginLeft，@videoMarginRight等，这就是为什么我称之为'smartMargin'。

用法

在我的主文件中，我定义了一个这样的断点，然后多次调用这个mixin：

.breakpoint(@width, @color, @labelsSize, @videoMargin) 
{
      video 
      {
         .smartMargin(@videoMargin);
      }
}


.breakPoint(10em, red,   3em, 1em auto 1em auto);
.breakPoint(10em, green, 3em, 2em unset unset unset);
.breakPoint(20em, blue,  3em, unset 3em unset unset);

输出css

因此，对于给定的@videoMargin值，这里是输出css生成的

                                          generated css
                                          -------------

 .smartMargin(3em);                       margin: 3em;

 .smartMargin(3em 1em 2em 4em);           margin: 3em 1em 2em 4em;

 .smartMargin(3em unset unset unset);     margin-top: 3em;

 .smartMargin(3em unset unset 4em);       margin-top: 3em;
                                          margin-right: 3em;

实施

mixin如下。它运作良好，但它似乎有点笨拙的地方，你需要提供4或1参数。如果有人可以对此进行优化，我会很感兴趣。

.smartMargin(@margin) when (length(@margin) = 4) 
{
    ._smartMargin() when (extract(@margin, 4) = unset), (extract(@margin, 3) = unset), (extract(@margin, 2) = unset), (extract(@margin, 1) = unset)
    {
        .marginComponent(@name, @value) 
        {
            & when not (@value = unset)
            {
                @{name}: @value;
            }
        }

        .marginComponent(margin-top, extract(@margin, 1));
        .marginComponent(margin-right, extract(@margin, 2));
        .marginComponent(margin-bottom, extract(@margin, 3));
        .marginComponent(margin-left, extract(@margin, 4));
    }

    ._smartMargin() when (default())
    {
        margin: @margin;
    }

    ._smartMargin();
}

.smartMargin(@margin) when (default())
{
    & when not (@margin = ~'') and not (@margin = unset)
    {
        margin: @margin;
    }
}

Answer 1

您可以将其重写为：

.smartMargin(@margin) when (isem(@margin)),(isem(extract(@margin,1))) and (isem(extract(@margin,2))) and (isem(extract(@margin,3))) and (isem(extract(@margin,4))) {
margin: @margin;
}
.smartMargin(@margin) when (default()) and (4 = length(@margin)) {
@positions: top, right, bottom, left;
.setmargin(@position,@margin) when (isem(@margin)){
margin-@{position}: @margin;
}
.setmargins(@i:1) when (@i <= 4){
.setmargin(extract(@positions,@i);extract(@margin,@i));
.setmargins((@i + 1));
}
.setmargins();
}

但首先我不认为你的代码有问题。个人应该考虑使用unset。我认为您应该使用initial关键字甚至0代替unset。这使您可以执行以下操作：

.smartMargin(@margin){
margin: @margin;
}
.one{
.smartMargin(3em);                       
}
.two{
.smartMargin(3em 1em 2em 4em);          
}
.three{
.smartMargin(3em 0 0 0);    
}
.four{
.smartMargin(3em 0 0 4em);
}

或者考虑使用Passing Rulesets to Mixins，而不是使用如下所示的内容：

.breakPoint(@width, @color, @labelsSize, @videoMargin) 
{
      video 
      {
         @videoMargin();
      }
}


.breakPoint(10em, red,   3em, {margin: 1em auto 1em auto;});
.breakPoint(10em, red,   3em, {margin: 1em auto;});

.breakPoint(10em, green, 3em,  {margin: 2em 0 0 0;});
.breakPoint(10em, green, 3em,  {margin: 2em 0 0;});
.breakPoint(10em, green, 3em,  {margin-top: 2em;});

.breakPoint(20em, blue,  3em, {margin: 0 3em 0 0;});
.breakPoint(20em, blue,  3em, {margin-right: 3em;});