本地化/定义Sass Mixin [英] Localizing/Scoping a sass mixin

问题描述

是否有一种方法可以本地化SCSS mixin以仅应用于特定范围？

Is there a way to localize a SCSS mixin to apply only to a certain scope?

我有以下示例

...在这里，我有几个基本的mixins

... 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.

是否存在一种方法

推荐答案

我知道了。 Mixins使用与sass变量相同的规则，因为如果它们嵌套在代码块中，则该代码块在该代码块之外是不可见的。

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.

所以为此，我做了只需将不同的项目嵌套在项目定义内；在 item 定义中定义mixin。结果是混合只能在 item 块内使用。

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.

查看

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

这篇关于本地化/定义Sass Mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！