SASS:创建每个mixin唯一的名称?

SASS:创建每个mixin唯一的名称?,sass,mixins,Sass,Mixins,我正在创建一个名为static()的mixin,它在另一个mixin中用于将静态属性分离到占位符中,这样在每次使用mixin时,这些属性就不会在输出中重复。下面是如何在名为button()的mixin中使用它,例如: @mixin button($color) { @include static('button') { border: 1px solid; border-radius: 5px; padding: .25em .5em;

我正在创建一个名为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 name的唯一用途是确保所创建占位符的声明不会被另一个同名占位符覆盖我的假设是确保这一点的最佳方法是将mixin本身的名称用于$Placeholder选择器的键(因为这对于mixin是唯一的)

问题:

如果这个假设是正确的,我不想输入我正在使用的mixin的名称(如“@include static('button')”)…那么,在static()mixin中,有没有一种方法可以动态确定static()在其中使用的mixin的名称


,是否有其他方法确保每个mixin的占位符是唯一的?

否。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%);
    }
}

如果为了避免通过多次导入创建重复的仅扩展选择器而跳过所有这些限制,那么您要寻找的就是“一次导入”。如果您是Compass用户,默认情况下,1.0包含一个可执行此操作的扩展。如果没有,快速搜索将向您展示实现此功能的几种不同方法。

这样做的目的是什么?在mixin中不能有递归,而且mixin不是一流的(不能将它们作为参数传递给其他mixin)。我不打算使用递归-本质上,我只需要一个每个mixin唯一的名称。因此,最有意义的是实际的mixin名称本身。我试图概括一下这里提到的一种技巧:-我不能在评论中给出更详细的解释,我不想用我认为不相关的东西把我的问题搞得一团糟。这听起来像是一个错误。问一下你实际上要解决的问题。啊,这是一个很好的观点。尽管有时“解决方案”Y可能涉及一个实用程序,该实用程序对其他问题很有用。尽管如此,这可能不是其中之一,因为不可否认,这个特性(能够在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%);
    }
}