我发现了这个有趣的SCSS 高级指南,有很多很酷的使用方法。然后我陷入了下面的问题,迭代器很清楚,但我无法理解数字1
和数字2
的用途。有任何想法吗??
社会保障局
$buttonConfig: 'save' 50px, 'cancel' 50px, 'help' 100px;
@each $tuple in $buttonConfig {
.button-#{nth($tuple, 1)} {
width: nth($tuple, 2);
}
}
编译的 CSS
.button-save {
width: 50px;
}
.button-cancel {
width: 50px;
}
.button-help {
width: 100px;
}
nth($list, $index)
: 返回 $list 中 $index 位置的值,所以在最后一个例子中,$buttonConfig: 'save' 50px, 'cancel' 50px, 'help' 100px; $tuple
在第一次迭代中将是 'save' 50 所以 ($tuple, 1) 将被保存并且 ($tuple, 2) 将是宽度值 50px 等等。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句