Question

我正在使用npm模块＆＃39; iconfont＆＃39;管理我的主题图标（与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;
    }
}

正如您所看到的，它使用了＆＃39; @ each＆＃39;循环生成我的图标类。

我已经创建了一个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参数中选择伪元素。

有什么想法吗？

THX

Answer 1

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

我在@each阻止之前删除了de：然后以这种方式修改了我的混音：

@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;

        }

    }

}

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

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

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

1 个答案: