CODEWITHSUNDEEP
sass
Cengizism
Cengizism

Reputation: 86

Concancate loop variable with string to produce another variable on the fly

I am trying make this mixing work.. Any ideas how to concancate a variable name on the fly and make it processed.

$colors: purple pink;

@each $color in $colors {

  .box--#{$color} {
    background-color: #{'$ui'}-$color;
  }

}

In this case $ui-red is a red color variable.

Upvotes: 1

Views: 37

Answers (1)

gambala
gambala

Reputation: 211

Unfortunately, you can't generate or reference to sass single variables in runtime. But you can store your color codes and names in sass maps (requires sass v3.3) and use it in cycle like this:

$colors: ("purple": #f7f,
          "pink":   #ffa);

@each $color-name, $color-code in $colors {
  .box--#{$color-name} {
    background-color: $color-code;
  }
}

In CSS you get:

.box--purple {
  background-color: #f7f;
}

.box--pink {
  background-color: #ffa;
}

Example: http://www.sassmeister.com/gist/c1285109946e5207e441c7ee589dd382

Upvotes: 1

Related Questions