Css 使用字体和类混合图标

在我的项目中，我有以下全局CSS来使用带有字体的图标：

[data-icon]:before {
  font-family: 'Icons_Font';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

[class*="icon-"] {
  font-family: 'Icons_Font';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

是否可以创建两个mixin，以便将此代码放在我的基本CSS代码中

我想将字体系列的名称传递给mixin，例如图标、字体或其他

一切都是一样的…

这是可能的

对于您的两个混音器，类似这样的内容：

.font-data-icon(@font-family){
 [data-icon]:before {
  font-family: @font-family;
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
 }
}
.icon-class(@font-family){
 [class*="icon-"] {
  font-family: @font-family;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
 }
}

然后可以调用mixin，传递所需的参数：

.font-data-icon('Icons_Font');
.icon-class('Icons_Font');

或者，如果两者中的属性保持相同，则两者仅混合一次：

.font-mixin(@font-family){
  font-family: @font-family;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

在两条规则中这样称呼它两次：

[data-icon]:before {
   .font-mixin('Icons_Font');
}
[class*="icon-"] {
   .font-mixin('Icons_Font');
}

两种情况下的CSS输出都是：

[data-icon]:before {
  font-family: 'Icons_Font';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
[class*="icon-"] {
  font-family: 'Icons_Font';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

---

我不能使用第二种方法，因为数据图标和类之间存在差异：“content:attr（数据图标）；”。。。但第一个建议很好。