css - 是否可以将图标与 css :before without hardcoding the code? 一起使用

Question

我正在使用回答 here on StackOverflow 的方法将自定义警察定义与其他类一起使用。该方法总结如下:

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: FontAwesome;
}
.icon-custom:before {
    content: "\f0c4";
}

当我使用自定义类来使用它时，我必须使用库生成的代码:

i:after { 
    content: '\f0c4';
}

如果此代码 f0c4 在库中发生更改，我想避免逐一报告每个自定义类中的更改。我决定使用 Sass or Less 来处理这个问题。它会像下面这样，但它不起作用。

i:after {
   .icon-custom
}

使用 Sass 或 Less，是否有可能避免这个神奇的数字？

我知道这是可能的:

i:after {
   content: @custom-code-value
}

但我更愿意避免更改 @custom-code-value::"\f0c4";这是唯一的解决方案吗？

Answer 1

您可以尝试将所有内容值分组到一个 map 变量

我给你改编了一个例子

SCSS

// Map variable
$icons: (
  facebook   : "\f0c4",
  twitter    : "\f0c5",
  googleplus : "\f0c6",
  youtube    : "\f0c7"
);

// Mixin doing the magic
@mixin icons-list($map) {
  @each $icon-name, $icon in $map {
    @if not map-has-key($map, $icon-name) {
      @warn "'#{$icon-name}' is not a valid icon name";
    }

    @else {
      &--#{$icon-name}::before {
        content: $icon;
      }
    } 
  }
}

// How to use it
.social-link {
    background-color: grey;
    @include icons-list($icons);
}

CSS

// CSS Output
.social-link {
  background-color: grey;
}
.social-link--facebook::before {
  content: "";
}
.social-link--twitter::before {
  content: "";
}
.social-link--googleplus::before {
  content: "";
}
.social-link--youtube::before {
  content: "";
}

---

因此，您只需维护该 $icons 变量，以防某些值发生变化。希望你明白了。