Question

我正在创建一个名为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的代码：

@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的名称？

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

Answer 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默认情况下会包含一个扩展程序。如果没有，快速搜索将向您展示实现此类功能的几种不同方式。

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

1 个答案: