本地化/作用域sass mixin

Question

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

我有以下示例

... 其中我有一些基本的 mixin。

@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的方法？

- Mike Fielden

---

为什么混合（mixin）在全局作用域中会成为问题呢？ - cimmanon

因为我不希望它被用于这个范围之外，也不想用相同的名称覆盖其他混合内容。这是一个非常大的项目，有很多人在参与。 - Mike Fielden

Answer 1

我想通了。混合器使用与sass变量相同的规则，如果它们嵌套在代码块中，则在该块外部不可见/不可用。

所以我所做的就是将不同的“项目”嵌套在item定义内；在item定义内定义混合器。结果是混合器只能在该item块中使用。 查看一下

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

- Mike Fielden