Question

我在我的CSS上使用了一系列类：

.separate-10{
    & > * + *{
        display: block;
        margin: 10px 0 0 0;
    }
}
.separate-20{
    & > * + *{
        display: block;
        margin: 20px 0 0 0;
    }
}
.separate-50{
    & > * + *{
        display: block;
        margin: 50px 0 0 0;
    }
}
.separate-70{
    & > * + *{
        display: block;
        margin: 70px 0 0 0;
    }
}

像这样使用它：

aside{ .separate-50(); }

我在想，也许将它们变成一个功能是个好主意。 LESS可以实现吗？你会怎么做？

Answer 1

你可以像这样创建一个mixin

.separate(@top: 0) {
    & > * + *{
        display: block;
        margin: @top 0 0 0;
    }
}

并将其称为

aside{ .separate(50px); }

aside{ .separate(20px); }

@top: 0定义了@top的默认值，以防您没有传递任何内容

如果需要，您还可以接收多个参数

.separate(@top: 0, @right: 0, @bottom: 0, @left: 0) {
    & > * + *{
        display: block;
        margin: @top @right @bottom @left;
    }
}

aside{ .separate(20px, 10px, 3px, 90px); }

Answer 2

我认为@Huangism的解决方案将非常灵活。

如果您将类编译到CSS中，您也可以尝试：

@steps: 10 20 50 70;
.separate-classes(@i:1) when (@i <= length(@steps)) {
@classpostfix: extract(@steps,@i);
@class: ~".separate-@{classpostfix}";
@{class} {
& > * + *{
        display: block;
        margin: @classpostfix 0 0 0;
    }
}
.separate-classes(@i + 1);
}
.separate-classes();

aside{ .separate-50; }
aside{ .separate-70(); }

如何将这一系列规则变成混合？

2 个答案: