css - 使用字体和类的图标混合

Question

我的元素中有以下全局 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，以便我将这段代码放在我的 Base CSS 代码中？

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

一切都一样......

Answer 1

这是可能的。

对于你的两个 mixins 是这样的:

.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;
 }
}

然后你可以调用mixins，传递所需的参数:

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

或者只有一个 mixin 用于两者，如果两者的属性保持相同:

.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;
}