关于这个问题,这里是我正在尝试做的一个例子,但是我觉得使用SASS进行插值在使用参数在mixin中输出变量时不起作用。
$red: #f00; @mixin color-accent-class($color) { .#{$color}-accent { color: $#{$color}; } } @include color-accent-class(red);
最终我正在尝试将重复代码放在DRY下面,所以我不会重复自己所有的草率风格,我想知道是否应该使用@function
和/或@each
或SASS的其他一些循环动作。提前感谢任何指导!
$blue: #2a62a7; $red: #db0042; $purple: #5b3b9f; $orange: #f7911a; $light-blue: #46aeed; $green: #49b842; @mixin product-accent($color-name, $hexval) { .product-accent-#{$color-name} { img { border: { left: { style: solid; width: 10px; color: $hexval; } } } h3, b { color: $hexval; } .button { @extend .button.#{$color-name}; } } } @include product-accent(black, #000); @include product-accent(blue, $blue); @include product-accent(red, $red); @include product-accent(purple, $purple); @include product-accent(orange, $orange); @include product-accent(light-blue, $light-blue); @include product-accent(green, $green);
答案 0 :(得分:0)
非常感谢@ martin-turjak的帮助。使用SASS列表,nth()
和@for
循环是诀窍。如果有更清洁的方法,请发信息。
$color-names: black, blue, red, purple, orange, light-blue, green; $color-hexvals: #000, $blue, $red, $purple, $orange, $light-blue, $green; @for $i from 1 through length($color-names) { @include product-accent(nth($color-names, $i), nth($color-hexvals, $i)); }