SASS：创建每个mixin唯一的名称？答案

【问题标题】：SASS: create name that is unique per-mixin?SASS：创建每个mixin唯一的名称？
【发布时间】：2014-07-27 00:18:26
【问题描述】：

我正在创建一个名为 static() 的 mixin，在另一个 mixin 中使用它来将静态属性分离到占位符中，这样每次使用 mixin 时这些属性就不会在输出中重复。以下是在名为 button() 的 mixin 中使用它的方法，例如：

@mixin button($color) {
    @include static('button') {
        border: 1px solid;
        border-radius: 5px;
        padding: .25em .5em;

        &:hover {
            cursor: pointer;
        }
    }

    background-color: $color;

    &:hover {
        background-color: mix(black, $color, 15%;
    }
}

这是 static() 混合的代码：

@mixin static($mixin-name, $extend: true) {
    // set global $Placeholder-Selectors if it doesn't already exist
    $Placeholder-Selectors: () !global !default;

    $selector: map-get($Placeholder-Selectors, $mixin-name);

    @if $extend == true {
        @if $selector == null {
            $selector: unique-id();
            $Placeholder-Selectors: map-merge($Placeholder-Selectors, ($mixin-name: $selector)) !global;

            @at-root %#{$selector} {
                @include static($mixin-name, false) {
                    @content;
                };
            }
        }

        @extend %#{$selector};
    } @else {
        @content;
    }
}

变量 $mixin-name 的唯一目的是确保创建的占位符的声明不会被另一个同名占位符覆盖。 我的假设是确保这一点的最佳方法是使用 mixin 本身的名称作为 $Placeholder-Selectors 的键（因为这对于 mixin 来说是唯一的） )。

问题：

如果这个假设是正确的，我不想输入我正在使用的 mixin 的名称（如“@include static('button')”）......所以，在静态() mixin，有没有办法动态确定里面使用的是static()的mixin的名字？

或者，是否有另一种方法来确保占位符在每个混合中都是唯一的？

【问题讨论】：

这样做的目的是什么？您不能在 mixins 中进行递归，并且 mixins 不是一流的（您不能将它们作为参数传递给其他 mixins）。
我不打算进行递归——本质上我只需要一个每个mixin唯一的名称。所以最有意义的是实际的 mixin 名称本身。我试图概括这里提到的一种技术：alistapart.com/article/dry-ing-out-your-sass-mixins - 我无法在评论中给出更详细的解释，我不想用我认为不相关的东西来混淆我的问题。跨度>
这听起来像XY Problem。询问您实际尝试解决的问题。
啊，这是一个好点。尽管有时“解决方案” Y 可能涉及对其他问题有用的实用程序。话虽如此，这可能不是其中之一，因为不可否认，这个功能（能够在 mixin 本身中引用 mixin 名称）可能有一小部分用例。
对这样的变量没有任何用处。如果你不解释你想要完成什么，没有人能帮助你。

标签： sass mixins

【解决方案1】：

没有。 Sass 无法获取任何使用的 mixin 的名称。

也就是说，你过度设计了。您需要做的就是在 mixin 之外设置扩展选择器。

%common-button-styles {
    border: 1px solid;
    border-radius: 5px;
    padding: .25em .5em;

    &:hover {
        cursor: pointer;
    }
}

@mixin button($color) {
    color: $color;
    @extend %common-button-styles;

    &:hover {
        background-color: mix(black, $color, 15%);
    }
}

如果您为了避免通过多次导入创建重复的仅扩展选择器而跳过所有这些环节，那么您正在寻找的就是import once。如果您是 Compass 用户，则 1.0 默认包含执行此操作的扩展。如果没有，快速搜索将向您展示实现此类功能的几种不同方法。

【讨论】：