How to use a variable in another variable in SCSS
How can I use a variable in another variable? How can i do this:
$buttons: default, success, primary, info, warning, danger;
$default_color: #aaa;
$success_color: #bbb;
$primary_color: #ccc;
$info_color: #ddd;
$warning_color: #eee;
$danger_color: #fff;
@each $b in $buttons {
.btn-#{$b} {
color: $#{b}_color;
}
}
+3
source to share
2 answers
The way you are looking is not yet implemented in SCSS, but you can do something like this:
$default_color: #aaa;
$success_color: #bbb;
$primary_color: #ccc;
$info_color: #ddd;
$warning_color: #eee;
$danger_color: #fff;
$buttonsList:
"default" $default_color,
"success" $success_color,
"primary" $primary_color,
"info" $info_color,
"warning" $warning_color,
"danger" $danger_color;
@each $b in $buttonsList {
.btn-#{nth($b, 1)} {
color: nth($b, 2);
}
}
Sassmeister link .
+3
source to share
Sass doesn't allow you to create or dynamically change variables. Use the map instead http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps Example: fooobar.com/questions/352235 / ...
+1
source to share