1

我的项目中有以下全局 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，例如 Icons_Font 或其他。

一切都一样...

4

1 回答 1

2

有可能的。

你的两个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;
 }
}

然后你可以调用 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;
}
于 2013-08-01T20:15:06.540 回答