Question

我正在创建一些图标字体规则，以便在我的网站中使用。使用Sass我想列出列表变量中的所有图标，并使用@each循环遍历它们。

代码如下所示：

$icons: 
    wifi 600,
    wifi-hotspot 601,
    weather 602;

@each $icon in $icons {
    .icon-#{nth($icon, 1)}, 
    %icon-#{nth($icon, 1)} {
        content: "\#{nth($icon, 2)}";
    }
}

问题是content:行的反斜杠。我需要它用于字符编码，但它逃避变量插值，输出如下所示的CSS：

.icon-wifi {
  content: "\#{nth($icon, 2)}";
}

再添加一个反斜杠：content: "\\#{nth($icon, 2)}";输出此CSS：

.icon-wifi {
  content: "\\600";
}

有没有办法让Sass在保持变量插值的同时只用一个反斜杠输出CSS？

Answer 1

如果在实际变量中包含反斜杠，那么当sass生成css时，它实际上会生成计算出的unicode字符，而不是在css输出中输出unicode。这通常仍然有效，但如果出现问题则很难调试，并且在渲染图标时更容易导致浏览器出现问题。

要在生成的CSS中输出实际的unicode，您可以这样做：

@function icon($character){
    @return unquote('\"') + unquote(str-insert($character,'\\', 1)) + unquote('\"');
}

$icon-thing: "e60f";

.icon-thing:before {
    content: icon($icon-thing); //outputs content: "\e60f";
}

Answer 2

我通过弄乱插值

来解决这个问题

sassmesiter demo

.icon-wifi {
  content: "\600";
}

.icon-wifi-hotspot {
  content: "\601";
}

.icon-weather {
  content: "\602";
}

编译到

Evaluate(evalStr)

Answer 3

您可以在$icons变量中为参数添加反斜杠。也就是说，

$icons: wifi "\600", wifi-hotspot "\601", weather "\602";

@each $icon in $icons {
  .icon-#{nth($icon, 1)}, %icon-#{nth($icon, 1)} {
    content: "#{nth($icon, 2)}";
  }
}

生成的CSS：

.icon-wifi {
  content: "\600"; 
}

.icon-wifi-hotspot {
  content: "\601"; 
}

.icon-weather {
  content: "\602"; 
}

Answer 4

如果您正在使用Gulp编译Sass文件，则安装此Gulp插件可能是解决问题的最简单方法：

https://www.npmjs.com/package/gulp-sass-unicode

var sass = require('gulp-sass');
var sassUnicode = require('gulp-sass-unicode');

gulp.task('sass', function(){
  gulp.src('style.scss')
    .pipe(sass())
    .pipe(sassUnicode()) // <-- This is the bit that does the magic
    .pipe(gulp.dest( "css/" ));
});

无需在Sass文件中进行任何代码更改。写出所需的Sass代码，并且Unicode字符会自动解码为输出CSS中的常规转义字符串。

输入SCSS

$testContent: "\f26e";

#test {
  content:  $testContent;
}

输出CSS

#test {
  content: "\f26e";
}

Answer 5

不幸的是，这些解决方案并不完全对我有用，但是我终于能够与SASS maps一起使用它

//node-sass 4.11.0
//libsass 3.5.4

$hexes: (
           checkmark: \2714
        );

@function out-content($var) {
    @return unquote("\"#{ $var }\""); 
}

@each $mod, $code in $hexes {    
    .#{$mod}-after {
        &:after {
            content: out-content($code);
        }
    }
}

//output
//.checkmark-after:after {
    //content: "\2714";
//}

Answer 6

使用引号和双斜杠

$ var：123→内容：“ \ e123”

date:add-duration

在输出中使用反斜杠进行Sass变量插值

6 个答案: