pass a list to a mixin as a single argument with SASS

Question

I like to make mixins with SASS that help me make good cross-browser compatibility. I want to make a mixin that looks like this:

@mixin box-shadow($value) {
             


        

Answer 1

SASS 3.1 or less

Note: If you're using SASS 3.2+ then use the Variable Arguments feature as rzar suggests.

Just use string interpolation in the mixin itself, like so:

@mixin box-shadow($value) {
  -webkit-box-shadow: #{$value};               // #{} removes the quotation marks that
  -moz-box-shadow: #{$value};                  // cause the CSS to render incorrectly.
  box-shadow: #{$value};
}

// ... calling it with quotations works great ...
@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

Thanks for the tip Ryan.