Interpolation of variable names is currently not possible in SASS. Here is the issue that discusses this https://github.com/nex3/sass/issues/626
However, you may use interpolation of placeholders:
%my-dark-styles {
background-color: #000;
}
%my-white-styles {
background-color: #FFF;
}
@mixin my_mixin($arg) {
@extend %my-#{$arg}-styles;
}
.header {
@include my_mixin("dark");
}
.footer {
@include my_mixin("white");
}
This compiles to:
.header {
background-color: #000; }
.footer {
background-color: #FFF; }
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…