Question

我最近开始使用LESS来更容易为大项目编写样式，但在将CSS更改为LESS之后，我的按钮，单选按钮，复选框，锚点和textareas上的文本消失了，只留下了填充。这些元素都使用嵌入字体（文本输入和textareas除外）

我不确定@ font-face是否与它有任何关系，但这是我的不足之处：

.-f-font(@name) {
    font-family: @name;
    src:~"url(../assets/fonts/@{name}.ttf),url(../assets/fonts/@{name}.otf),url(../assets/fonts/@{name}.eot)";
}
.-f-font-Audimat {
    @font-face {
        .-f-font("Audimat");
    }
}
.-f-font-Jura {
    @font-face {
        .-f-font("Jura");
    }
}

Answer 1

问题

您给定代码 的CSS输出本身不会使 （-f-font-Audimat和-f-font-Jura）成为自己，只有font-face块。所以你的代码只会产生这个：

@font-face {
  font-family: "Audimat";
  src: url(../assets/fonts/Audimat.ttf),url(../assets/fonts/Audimat.otf),url(../assets/fonts/Audimat.eot);
}
@font-face {
  font-family: "Jura";
  src: url(../assets/fonts/Jura.ttf),url(../assets/fonts/Jura.otf),url(../assets/fonts/Jura.eot);
}

您可以通过以下两种方式纠正：

选项1

保持您的mixin，因为您当前将其显示为 ，并将font-family定义直接添加到类定义中（不利的是，它重复了代码）。

<强> LESS

.-f-font-Audimat {
    font-family: "Audimat";
    @font-face {
        .-f-font("Audimat");
    }
}
.-f-font-Jura {
    font-family: "Jura";
    @font-face {
        .-f-font("Jura");
    }
}

CSS输出

.-f-font-Audimat {
  font-family: "Audimat";
}
@font-face {
  font-family: "Audimat";
  src: url(../assets/fonts/Audimat.ttf),url(../assets/fonts/Audimat.otf),url(../assets/fonts/Audimat.eot);
}
.-f-font-Jura {
  font-family: "Jura";
}
@font-face {
  font-family: "Jura";
  src: url(../assets/fonts/Jura.ttf),url(../assets/fonts/Jura.otf),url(../assets/fonts/Jura.eot);
}

选项2

更改你的mixin以动态创建所有字体定义，包括类名，并在没有嵌套的情况下调用mixin（缺点，LESS中动态创建的类当前不能用作mixins）。像这样：

<强> LESS

.-f-font(@name) {
  @className: ~"@{name}";
  .-f-font-@{className} {
    font-family: @name;
  }
  @font-face {
    font-family: @name;
    src:~"url(../assets/fonts/@{name}.ttf),url(../assets/fonts/@{name}.otf),url(../assets/fonts/@{name}.eot)";
  }
}

.-f-font("Audimat");
.-f-font("Jura");

CSS输出 - 与选项＃1 相同。

较少CSS所有文本不再显示

1 个答案:

问题

选项1

选项2