1
.green-oval-button {
    @extend .oval-button;
    @include radial-gradient($green-gradient...);

    &:active {
        @include radial-gradient($green-gradient-active...);
    }   
}

.blue-oval-button {
    @extend .oval-button;
    @include radial-gradient($blue-gradient...);

    &:active {
        @include radial-gradient($blue-gradient-active...);
    }   
}

Is it possible to simplify above SassScripts with Mixin + Interpolation + Variable Arguments?

Example: It caused error

@mixin color-oval-button($color) {
    @extend .oval-button;
    @include radial-gradient(#{$color}-gradient...);

    &:active {
        @include radial-gradient(#{$color}-gradient...);
    }   
}

@include color-oval-button("$green");
@include color-oval-button("$blue");
Roy Lee
  • 10,572
  • 13
  • 60
  • 84

1 Answers1

0

variable interpolation is not available in SASS but according to creator, Chris Eppstein it will be possible via the map feature once 3.3 is realeased. https://github.com/nex3/sass/issues/132

Until then, you can do something of the sort using 2 lists with mapped values and a for loop. just specify the gradient you want in the same index of the list as the color variable you want to call. 

 $colors: blue, green;
 $gradients: [gradient css], [gradient css];
    @for $i from 1 through length($colors) {
      @mixin #{nth($colors, $i}-oval-button($color) {
        @extend .oval-button;
        @include radial-gradient( #{nth($gradients, $i)} );
        &:active {
          @include radial-gradient( #{nth($gradients, $i)} );
        }   
      }
    }

which gives you:

@mixin blue-oval-button($color) {
  @extend .oval-button;
  @include radial-gradient(blue-gradient);
  $:active {
    @include radial-gradient(blue-gradient);
  }
}
etc....

For a fancier and slightly slicker version, check the link to see how to write a lookup function.

DMTintner
  • 14,405
  • 5
  • 35
  • 32
  • what im saying is that you cant specify $green-gradient as an interpolated variable. but what you can do is specify the value of it in a list. then just make sure that green-gradients's value is mapped at the same index as the variable name green in the other list – DMTintner Oct 20 '13 at 17:19
  • hey @DMTintner I have to apologize, I got what you meant now! =) Yes you are right about variable interpolation! – Roy Lee Oct 20 '13 at 18:01
  • Mixin name interpolation is not supported... `@mixin #{$var}-something(){}` won't work – wintercounter Dec 30 '14 at 01:26