Localizing/Scoping a sass mixin

css, sass

Solution

I figured it out. Mixins use the same rules as sass variables in that if they are nested inside a block of code its not viewable/useable outside that block.

So for this what I did was just nest the different "items" inside the `item` definition; define the mixin inside the `item` definition. And the result is that the mixin can only be used within that `item` block.

Check it out

.item {
  @mixin shadow-icon ($color) { 
    span[class*='entypo'] {
      text-shadow: 4px 3px 0 $color, 7px 6px 0 rgba(0,0,0,.2);
      font-size: 156px;
    }  
  }

  &.create {
    $createColor: rgb(69, 178, 157);

    background: $createColor;

    @include shadow-icon($createColor);
  }

  &.view {
    $viewColor: rgb(239, 201, 76);

    background: $viewColor;

    @include shadow-icon($viewColor);
  }

  &.report {
    $reportColor: rgb(226, 122, 63);

    background: $reportColor;

    @include shadow-icon($reportColor);
  }
}

Problem

Is there a way to localize a SCSS mixin to apply only to a certain scope? I have the following example ... where I have a couple basic mixins ``` @mixin shadow ($color) { text-shadow: 4px 3px 0 $color, 7px 6px 0 rgba(0,0,0,.2); } @mixin shadow-icon ($color) { span[class*='entypo'] { @include shadow($color); font-size: 156px; } } ``` I dont want to repeat the exact same code for every `item` with just a different color. But this will be a one off style for this page so I dont want these to be accessible from anywhere just this file/scope/etc. Does there exist a way to localize or scope a mixin?

Original source