是的,是的。你可以使用
!global
标记创建一个全局变量,您也可以从mixin作用域中读取该变量。
$color-list: (
"c1" : #ed0ead,
"c2" : #12bc21,
"c3" : #2666cc
);
@mixin color-variants {
@each $class, $color in $color-list {
$myColor: $color !global;
&.#{$class} {
@content;
}
}
}
.my-module {
padding: 1rem;
background-color: #fff;
border-top-size: 5px;
border-top-style: solid;
@include color-variants {
border-top-color: $myColor;
}
}
.another-module {
padding: 1rem;
border-radius: 5px;
border-size: 2px;
border-style: solid;
@include color-variants {
background-color: rgba($myColor, 0.5);
&:hover {
color: $myColor;
}
}
}
这是给你的一个沙士:
https://www.sassmeister.com/gist/8f90133f3ee1d2e67e21f086711cee39