SASS - 将变量传递给@each 循环答案

【问题标题】：SASS - Passing variable to @each loopSASS - 将变量传递给@each 循环
【发布时间】：2015-11-05 23:19:03
【问题描述】：

我正在使用 npm 模块“iconfont”来管理我的主题图标（使用 gulp）。该模块使用模板生成 SCSS 文件。见下文：

    @font-face {
    font-family: '<%= fontName %>';
    font-weight: normal;
    font-style: normal;
    src: url('../<%= fontPath %><%= fontName %>.eot');
    src: url('../<%= fontPath %><%= fontName %>.woff2') format('woff2'),
         url('../<%= fontPath %><%= fontName %>.woff') format('woff'),
         url('../<%= fontPath %><%= fontName %>.ttf') format('truetype'),
         url('../<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'),
         url('../<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');

}

.<%= className %>[class^="<%= className %>-"],
.<%= className %>[class*=" <%= className %>-"] {
    display: inline-block;
    font-family: '<%= fontName %>';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
}

$icons: (
    <%= glyphs.map(function(glyph) {
        return glyph.name + ': \'' + '\\' + glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() + '\''
    }).join(',\n    ') %>
);

@each $name, $icon in $icons {
    .<%= className %>-#{$name}:##Dynamic position### {
        font-family: '<%= fontName %>';
        content: $icon;
    }
}

如您所见，它使用“@each”循环来生成我的图标类。

我创建了一个 mixin 来使用它。见下文：

@mixin svgicon($name, $fontsize, $lineheight, $color, $position){
    @extend .icon;
    @extend .icon-#{$name}:#{$position};
    @extend #{$position};
    font-size:$fontsize;
    line-height:$lineheight;
    color:$color;
}

这是我的问题：默认情况下，图标模块在 ::before 伪元素上生成图标，我希望能够在我的 mixin 参数中选择伪元素。

有什么想法吗？

谢谢

【问题讨论】：

没有什么可以通过的。选择器早在你调用你的 mixin 之前就已经生成了。除了修改@each 块之外，没有什么要做。
通过修改@each块，你的意思是用 ::after 伪元素创建第二个选择器，并创建第二个 mixin 吗？
您需要在@each 中创建另一个选择器。只需修改 mixin 以扩展正确的选择器。大多数人不想修改 3rd 方库以适应他们的目的。
好的，我明白了。但我以其他方式管理它。我已经删除了 @each bloc 中的 :before，并根据我的参数在我的 mixin 中创建了一个条件

标签： variables sass

【解决方案1】：

解决方案（我认为很简单）

我已经从 @each 块中删除了 de :before，然后以这种方式修改了我的 mixin：

@mixin svgicon($name, $fontsize, $lineheight, $color, $position:before){

    @if $position == 'before'{

        &:before{

            @extend .icon;
            @extend .icon-#{$name};
            font-size:$fontsize;
            line-height:$lineheight;
            color:$color;

        }

    } @else {

        &:after{

            @extend .icon;
            @extend .icon-#{$name};
            font-size:$fontsize;
            line-height:$lineheight;
            color:$color;

        }

    }

}

现在我只需要以这种方式包含我的 mixin：

@include svgicon('gyro', 10px, 10px, red, 'before');

【讨论】：