要让它们“分组”,您需要创建一个嵌套和分组的 mixin。下面是一个分组的 mixin 函数,“流线型”用于边距设置。
- 它需要 1 到 8 个参数;总是成对的
position
then value
(除了下面提到的;它可以接受任何位置顺序和auto
orinherit
的值)。
- 传递一个“位置”只会
0px
在该位置设置一个边距。
- 将非单位编号默认为
px
,但将明确设置的单位保持为已通过。
- 传递一个数字值参数会将所有边距设置为该数字。
少混音
.setMargins(@s1: ~'', @v1: 0, @s2: ~'', @v2: 0, @s3: ~'', @v3: 0, @s4: ~'', @v4: 0) {
.setPos(top, @T) {
.setNum() when (isnumber(@T)) {
margin-top: @T * 1px;
}
.setNum() when not (isnumber(@T)){
margin-top: @T;
}
.setNum();
}
.setPos(right, @R) {
.setNum() when (isnumber(@R)) {
margin-right: @R * 1px;
}
.setNum() when not (isnumber(@R)) {
margin-right: @R;
}
.setNum();
}
.setPos(bottom, @B) {
.setNum() when (isnumber(@B)) {
margin-bottom: @B * 1px;
}
.setNum() when not(isnumber(@B)) {
margin-bottom: @B;
}
.setNum();
}
.setPos(left, @L) {
.setNum() when (isnumber(@L)) {
margin-left: @L * 1px;
}
.setNum() when not (isnumber(@L)) {
margin-left: @L;
}
.setNum();
}
//allows all to be called with one number or value
.setPos(@A, 0) when (isnumber(@A)) {
margin: @A * 1px;
}
.setPos(auto, 0) {
margin: auto;
}
.setPos(inherit, 0) {
margin: inherit;
}
//default null if no valid side given
.setPos(@other, 0) {}
//call all possible positions
.setPos(@s1, @v1);
.setPos(@s2, @v2);
.setPos(@s3, @v3);
.setPos(@s4, @v4);
}
例子
.setMargins(right);
生产margin-right: 0px;
.setMargins(right, 15);
生产margin-right: 15px;
.setMargins(left, 10em);
生产margin-left: 10em;
.setMargins(top, 12, right, 10);
产生:margin-top: 12px; margin-right: 10px;
.setMargins(25);
产生:margin: 25px;
.setMargins(auto);
产生:margin: auto;
所以你在选择器中使用它:
较少的
#testfeature {
.setMargins(left, 10, right, 10);
}
CSS 输出
#testfeature {
margin-left: 10px;
margin-right: 10px;
}