SASS Mixin 值可以是 CSS 属性吗?
问题:
创建通用边距/padding mixin,由于代码结构不正确而失败:
[class*="shift"] { $sft-o: 10px; @mixin shift_stp($val) { &[class*="_sml"]{ $val: $sft-o; } &[class*="_mid"]{ $val: $sft-o * 2; } &[class*="_big"]{ $val: $sft-o * 3; } } &[class*="_m"]{ @include shift_stp(margin); } &[class*="_p"]{ @include shift_stp(padding); } }
解决方案:
在 mixin 值中使用变量作为 CSS 属性名称,需要字符串插值,使用 #{$var} 语法实现:
[class*="shift"] { $sft-o: 10px; @mixin shift_stp($val) { &[class*="_sml"]{ #{$val}: $sft-o; } &[class*="_mid"]{ #{$val}: $sft-o * 2; } &[class*="_big"]{ #{$val}: $sft-o * 3; } } &[class*="_m"]{ @include shift_stp(margin); } &[class*="_p"]{ @include shift_stp(padding); } }
注意:通过重新评估属性选择器结构来确保选择器特异性。
以上是SASS Mixin 值可以是动态 CSS 属性吗?的详细内容。更多信息请关注PHP中文网其他相关文章!