0

I tried to change the variable used in another variable from the mixin, but I couldn't change the variable value.

$color: white !default;
$var: "this #{$color} is a test" ;

@mixin test($value, $color) {
  // here how to override the $color value
  color: $value;
}

.a {
  @include test($var, #ccc);
}

By default the $color value is in white, and this $color variable is used in another variable $var.

When I pass the $var inside a mixin to change its variable ($color) value, it is not changed. Anyone please suggest the solution for this?

Expected Output:

.a {
  color: "this #ccc is a test";
}

Thanks in advance.

Yahwe Raj
  • 1,947
  • 5
  • 25
  • 37

1 Answers1

0

When you pass the $var variable as the argument, its value is not updated because it has already been assigned. Passing a new $color variable in the mixin won't update the variable. A workaround can be by using the set-nth function to replace the white with the color passed in the mixin:

$color: white !default;
$var: #{$color}, red;

@mixin test($value, $colour) {
  // here how to override the $color value
  $var: set-nth($value, 1, $colour);
  color: $var;
}

.a {
  @include test($var, #ccc);
}
Chirag Bhansali
  • 1,900
  • 1
  • 15
  • 22
  • Thanks for the update its working for list, but I need it for string. Is it possible? I have modified the code snippet as per the requirement. – Yahwe Raj Apr 13 '18 at 03:05
  • @YahweRaj: I don't think this is possible. In such a case you can manually update the value manually or create a function/mixin which gives an output as per the variable passed as the argument – Chirag Bhansali Apr 13 '18 at 11:20