mixins.scss中定义的混合指令
`@mixin m($modifier) {
$selector: &;
$currentSelector: "";
@each $unit in $modifier {
$currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
}
@at-root {
#{$currentSelector} {
@content;
}
}
}`
form.scss中使用
@include b(form) {
@include m(label-left) {
& .ec-form-item__label {
text-align: left;
}
}
@include m(label-top) {
& .ec-form-item__label {
float: none;
display: inline-block;
text-align: left;
padding: 0 0 10px 0;
}
}
@include m(inline) {
& .ec-form-item {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
& .ec-form-item__label {
float: none;
display: inline-block;
}
& .ec-form-item__content {
display: inline-block;
vertical-align: top;
}
&.ec-form--labec-top .ec-form-item__content {
display: block;
}
}
}
@each $unit in $modifier
中$modifier
是传入的'label-left'
,而@each
使用中$modifier
应该传入的是一个<List>,不能理解,请大神解释下。
是滴,
$modifier
应该传入list
,但是如果这个 list 只有一个值呢?m(label-left)
说明这个 list 只有一个值,如果两个值就是m(label-left, modifier)
。