Question

Given I have a list:

$box-shadow-properties: -webkit-box-shadow, -moz-box-shadow, box-shadow;

I would like to be able to iterate through this list for a mixin:

@mixin box-shadow-with-inset($box-shadow-params, $inset-params) {
  @each $property in $box-shadow-properties {
    $property: $box-shadow-params, $inset-params;
  }
}

So that I can call this:

@include box-shadow-with-inset(0px 1px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(0, 0, 0, 0.1));

There are no compile errors, but it does not compile to the CSS file — it is as though it is ignored completely. Anybody have any ideas?

Answer 1

Figured it out. Apparently, you must interpolate property names when used in conjunction with a list like this. So:

BAD:

$property: $box-shadow-params, $inset-params;

GOOD:

#{$property}: $box-shadow-params, $inset-params;