0

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

我不确定@font-face 是否与它有关，但这是我的 LESS：

.-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");
    }
}
4

1 回答 1

1

问题

给定代码的 CSS 输出不会生成类(-f-font-Audimat和-f-font-Jura) 本身，只是字体块。所以你的代码只是生成这个：

@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定义直接添加到类定义中（缺点，它有重复的代码）。

较少的

.-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 中动态创建的类目前不能用作 mixin）。像这样：

较少的

.-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相同。

于 2013-10-01T10:22:28.767 回答