Shortening code by using a variable for including mixin

Question

I'd like to know if there is a way to include a mixin (compass or my own) by a value of a specific variable.

Currently I have the following mixin (which works)

@mixin aligned-top-bottom-border($size, $side){
  @if $side == "left"{
   @include border-top-left-radius($size);
   @include border-bottom-left-radius($size);
  }
  @else{
    @include border-top-right-radius($size);
    @include border-bottom-right-radius($size);
  }
}

I'd like to turn it to something like the code below (or any other alternative that is shorter and more readable)

@mixin aligned-top-bottom-border($size, $side){

 @include border-top-#{side}left-radius($size);
 @include border-bottom-#{side}-radius($size);

}

I'm using Sass 3.4.5 (Selective Steve)

possible duplicate of [Sass Interpolation of Mixin, Function, and Variable names](http://stackoverflow.com/questions/16152547/sass-interpolation-of-mixin-function-and-variable-names) — cimmanon, Oct 05 '14 at 12:47
@Harry I've made a less tag and removed it a few minutes after sending the questions. — Nir Naor, Oct 06 '14 at 07:54

score 1 · Answer 1 · answered Oct 14 '14 at 17:57

Sass documentation has this to say about interpolation:

You can also use SassScript variables in selectors and property names using #{} interpolation syntax

Nothing about using them in mixins or functions. But there is nothing stopping you from adding your own vendor loop to the mixin instead of using the compass mixin. Like this:

@mixin aligned-top-bottom-border($size, $side){
 @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', ''){
  #{$vendor}border-top-#{$side}-radius: $size;
  #{$vendor}border-bottom-#{$side}-radius: $size;
 }
}

It gets a bit DRYer but a lot bigger in final output. But it possible.

Shortening code by using a variable for including mixin

1 Answers1