Question

我正在构建一个SASS mixin，允许我传入各种变量来构建一个字体真棒的声明，如下所示：

@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
  &:after {
    content:$unicode;
    font-family:"FontAwesome";
    font-size:$size;
    color:$color;
    font-weight:$weight;
    margin:$margin;
    @content;
  }
}

用法如下：

@include after-font-awesome('\f078', 15px, 0 0 0 0.3em, orange, 900) {}

这要求我传入带有'\XXX'单引号和斜杠作为字符串的unicode。这是有效的，但我正在尝试执行以下操作，我只传入f078这样的unicode数字，当它到达mixin时，它将其打印为'\f078'。在阅读了我试过的一些文档之后：

@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
  &:after {
    content:'\#{$unicode}';
    font-family:"FontAwesome";
    font-size:$size;
    color:$color;
    font-weight:$weight;
    margin:$margin;
    @content;
  }
}

或

@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
  &:after {
    content:'\{$unicode}';
    font-family:"FontAwesome";
    font-size:$size;
    color:$color;
    font-weight:$weight;
    margin:$margin;
    @content;
  }
}

或

@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
  &:after {
    content:'\$unicode';
    font-family:"FontAwesome";
    font-size:$size;
    color:$color;
    font-weight:$weight;
    margin:$margin;
    @content;
  }
}

但唉它没用。任何帮助将不胜感激与我一起解决这个问题。

Answer 1

我的项目遇到了同样的问题。

$unicode: f0ca;
$withslash: "\"\\#{$unicode}\"";

我试过了this。希望它有所帮助。

Answer 2

反斜杠行为的细微差别在Sass中是一个持续存在的问题（例如， libsass#1115）。

话虽如此，sass#659，中提供了一些hack，但它们强烈依赖于Sass的版本和实现。 solution provided by andrewgrewell似乎对很多人都有效，但无论如何都能看出哪些解决方案/黑客对你有用。 SassMeister Demo

@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
  &:after {
    content: #{"\"\\"}#{$unicode + "\""}; // <-- andrewgrewell's hack
    font-family: "FontAwesome";
    font-size: $size;
    color: $color;
    font-weight: $weight;
    margin: $margin;
    @content;
  }
}

// Usage
.selector {
  @include after-font-awesome('f078', 15px, 0 0 0 0.3em, orange, 900);
}

// CSS Output
.selector:after {
  content: "\f078";
  font-family: "FontAwesome";
  font-size: 15px;
  color: orange;
  font-weight: 900;
  margin: 0 0 0 0.3em;
}

使用SASS将变量传入mixin，其中声明是一个字符串

2 个答案: