Regarding the question, here's an example of what I'm trying to do but I have a feeling that interpolation with SASS doesn't work in outputting variable within a mixin using an argument.
$red: #f00; @mixin color-accent-class($color) { .#{$color}-accent { color: $#{$color}; } } @include color-accent-class(red);
Ultimately I'm trying to make the repetitive code below DRY so I'm not repeating myself all sloppy style and I'm wondering if it should be done with @function
and/or @each
or some other looping action with SASS. Thanks in advance for any guidance!
$blue: #2a62a7; $red: #db0042; $purple: #5b3b9f; $orange: #f7911a; $light-blue: #46aeed; $green: #49b842; @mixin product-accent($color-name, $hexval) { .product-accent-#{$color-name} { img { border: { left: { style: solid; width: 10px; color: $hexval; } } } h3, b { color: $hexval; } .button { @extend .button.#{$color-name}; } } } @include product-accent(black, #000); @include product-accent(blue, $blue); @include product-accent(red, $red); @include product-accent(purple, $purple); @include product-accent(orange, $orange); @include product-accent(light-blue, $light-blue); @include product-accent(green, $green);