Dynamically create or reference variables in Sass

Question

I am trying to use string interpolation for my variable to refer to another variable:

// Set up variable and mixin $foo-baz: 20px; @mixin do-this($bar) { width: $foo-#{$bar}; } // Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin @include do-this('baz'); 

But when I do this, I get the following error:

Undefined variable: "$ foo -".

Does Sass support PHP style variable variables?

Answer 1

Sass does not allow creating or dynamically changing variables. However, you can use lists for similar behavior.

SCS:

 $medium: 2; $width: 20px 30px 40px; @mixin do-this($bar) { width: nth($width, $bar); } #smth { @include do-this($medium); } 

CSS

 #smth { width: 30px; } 

• http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists
• http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions

Answer 2

In fact, this can be done using SASS maps instead of variables. Here is a quick example:

Dynamic call:

 $colors: ( blue: #007dc6, blue-hover: #3da1e0 ); @mixin colorSet($colorName) { color: map-get($colors, $colorName); &:hover { color: map-get($colors, $colorName#{-hover}); } } a { @include colorSet(blue); } 

Outputs as:

 a { color:#007dc6 } a:hover { color:#3da1e0 } 

---

Dynamic creation:

 @function addColorSet($colorName, $colorValue, $colorHoverValue: null) { $colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue); $colors: map-merge($colors, ( $colorName: $colorValue, $colorName#{-hover}: $colorHoverValue )); @return $colors; } @each $color in blue, red { @if not map-has-key($colors, $color) { $colors: addColorSet($color, $color); } a { &.#{$color} { @include colorSet($color); } } } 

Outputs as:

 a.blue { color: #007dc6; } a.blue:hover { color: #3da1e0; } a.red { color: red; } a.red:hover { color: #cc0000; } 

Answer 3

Anytime I need to use a conditional value, I rely on functions. Here is a simple example.

 $foo: 2em; $bar: 1.5em; @function foo-or-bar($value) { @if $value == "foo" { @return $foo; } @else { @return $bar; } } @mixin do-this($thing) { width: foo-or-bar($thing); } 

Answer 4

Here is another option if you are working with rails and possibly in other circumstances.

If you add .erb at the end of the file extension, Rails will process erb in the file before sending it to the SASS interpreter. This gives you the ability to do what you want in Ruby.

For example: (File: foo.css.scss.erb)

 // Set up variable and mixin $foo-baz: 20px; // variable <% def do_this(bar) "width: $foo-#{bar};" end %> #target { <%= do_this('baz') %> } 

Results in the following scss:

 // Set up variable and mixin $foo-baz: 20px; // variable #target { width: $foo-baz; } 

Which of the rough result leads to the following css:

 #target { width: 20px; } 

Answer 5

It is impossible to make a dynamic variable in SASS at the moment, since you will add / connect another var, which you need to parse when you run the sass command.

As soon as the command starts, it throws an error for Invalid CSS, since all your declared variables will follow the climb.

After starting you cannot declare variables again on the fly

To understand that I understood this, kindly indicate whether the following is correct:

you want to declare variables where the next part (word) is dynamic

something like

 $list: 100 200 300; @each $n in $list { $font-$n: normal $n 12px/1 Arial; } // should result in something like $font-100: normal 100 12px/1 Arial; $font-200: normal 200 12px/1 Arial; $font-300: normal 300 12px/1 Arial; // So that we can use it as follows when needed .span { font: $font-200; p { font: $font-100 } } 

If this is what you want, I'm afraid at the moment, it's not allowed