LESS的智能保证金混合 [英] Smart margin mixin for LESS

问题描述

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

I've created a .smartMargin() mixin for LESS CSS to be used in responsive design LESS.

我在这里分享它是为了他人的利益，也是因为我很好奇是否有任何方法可以使它更有效.

I'm sharing it here for the benefit of others and also because I'm curious if there's any way to make it more efficient.

mixin被设计为从另一个可响应的设计断点的mixin中调用.这个想法是，您可能希望通过覆盖每个连续断点中的一个或多个边距来分别覆盖顶部，左侧，底部，右侧的边距.

The mixin is designed to be called from within another mixin that represents a responsive design breakpoint. The idea is that you may want to override top, left, bottom, right margins individually by overriding one or more margins in each successive breakpoint.

在主mixin中，我只想要一个@videoMargin的参数，而不是@videoMarginLeft，@videoMarginRight等，所以这就是为什么我将其称为"smartMargin".

In main mixin I just want one parameter for @videoMargin as opposed to @videoMarginLeft, @videoMarginRight etc so that's why I've called it 'smartMargin'.

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

In my main file I define a breakpoint like this, and then call this mixin several times:

.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

Output css

So for a given value of @videoMargin here's the output css generated

                                          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个参数.如果有人可以优化这一点，我将非常感兴趣.

Implementation

The mixin is as follows. It works well but it just seems a little clumsy in places and you need to provide either 4 or 1 parameters. If anybody can optimize this I'd be very interested to see.

.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;
    }
}

推荐答案

您可以将其重写为以下内容:

You could possibly rewrite it to something like:

.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.这使您可以执行以下操作:

But in the first place i don't think there is something wrong with your code. Personally is should consider the use of unset. I think you should use the initial keyword or even 0 in stead of unset. This enables you to do the following:

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

或者考虑使用将规则集传递给Mixins ，您可以使用如下所示的内容:

Or consider to use Passing Rulesets to Mixins, than you can use something like that shown below:

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

这篇关于LESS的智能保证金混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！