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

我使用npm模块'iconfont'来管理我的主题图标（带有一些大口）。模块使用模板生成SCSS文件。见下：SASS - 将变量传递给@each循环

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

这里是我的问题：默认情况下，图标模块生成的伪元素之前::图标，我想能够选择伪元素在我的mixin参数。

有什么想法？

THX

来源

2015-11-05 jetpulp-fronts

没有什么可以通过。在你调用你的mixin之前很久就会生成选择器。除了修改'@ each'块之外，没有什么*要做。 – cimmanon

通过修改'@ each'块，你的意思是用:: after伪元素创建第二个选择器，并创建第二个mixin？ –

您需要在'@ each'中创建另一个选择器。 mixin只需要修改即可扩展正确的选择器。大多数人不想修改第三方库以适应他们的目的。 – cimmanon

解决方案（简单得多，我认为）

我已经删除德：从@each块之前，然后修改了我的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');

来源

2015-11-05 15:19:03

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

回答

相关问题