本地化/确定 sass mixin答案

【问题标题】：Localizing/Scoping a sass mixin本地化/确定 sass mixin
【发布时间】：2013-11-11 14:43:24
【问题描述】：

有没有办法将 SCSS mixin 本地化为仅适用于特定范围？

我有以下example

...我有几个基本的 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;
  }  
}

我不想用不同的颜色为每个item 重复完全相同的代码。但这将是此页面的一种一次性样式，因此我不希望仅在此文件/范围/等的任何地方都可以访问这些样式。

是否存在本地化或限定 mixin 的方法？

【问题讨论】：

为什么mixin正好在全局范围内会有问题？
因为我不想在这个范围之外使用它，也不想用相同的名称覆盖不同的 mixin。这是一个相当大的项目，有很多人在做。

标签： css sass

【解决方案1】：

我想通了。 Mixin 使用与 sass 变量相同的规则，因为如果它们嵌套在代码块内，则在该代码块外不可见/不可用。

为此，我所做的只是将不同的“项目”嵌套在 item 定义中；在 item 定义中定义 mixin。结果是mixin只能在那个item块内使用。

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);
  }
}

【讨论】：