css - 本地化/确定 sass mixin

Question

有没有办法将 SCSS 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 的范围？

Answer 1

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

所以为此我所做的只是在定义中嵌套不同的“项目” item；在定义中定义mixin item。结果是 mixin 只能在该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);
  }
}