是否可以在没有对代码进行硬编码的情况下将图标与css:一起使用? [英] Is it possible to use Icons with css:before without hardcoding the code?

问题描述

我正在此处在StackOverflow上回答的方法与其他类一起使用自定义策略定义.此方法总结如下:

I am using the method answered here on StackOverflow to use custom police definition with other classes. This method is summarized below:

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

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

When I'm using a custom class to use it, I have to use the code generated by the library:

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

如果库中的代码f0c4发生更改，我想避免逐个报告每个自定义类中的更改.我决定使用Sass或Less来解决此问题. 如下所示，但它不起作用.

In case this code f0c4 change in the library, I would like to avoid reporting the change in every custom class one by one. I decided to use Sass or Less to be able to deal with this problem. It would be like below but it does not work.

i:after {
   .icon-custom
}

使用Sass或更少，是否有可能避免此幻数?

With Sass or Less, is it possible to avoid this magic number?

我知道这是有可能的:

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

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

But I prefer to avoid changing the @custom-code-value: : "\f0c4"; Is it the only solution?

推荐答案

您可以尝试将所有 content值分组在 map变量

You can try to group all the content value in a map variable

我为您改了个例子

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 变量，以防某些值发生变化.希望你能明白.

---

So you only have to maintain that $icons variable in case some values change. hope you get the idea.

这篇关于是否可以在没有对代码进行硬编码的情况下将图标与css:一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！