CSS类继承答案

【问题标题】：CSS class inheritanceCSS类继承
【发布时间】：2017-05-21 20:58:28
【问题描述】：

font awesome css 样式允许创建装载轮。例如添加这些类 fa fa-cog fa-spin fa-3x fa-fw。但是，我想在我们的项目样式中使用 my-spinner 类，这些样式可以继承自上述所有内容。因此，在我们的项目中，我们只会向元素添加一个类，以使 spinner 而不是 5 一直。我们正在使用更少。有没有办法定义一个继承自所有这 5 个类的类？

谢谢

斯坦

【问题讨论】：

见"Extend"。

标签： css inheritance styles less

【解决方案1】：

您需要将 FontAwesome CSS 导入为 LESS。（不要忘记设置字体的路由。）

少：

@import (less) "../css/font-awesome.min.css";

.spinner-cog {
  &:extend(.fa, .fa-spin, .fa-3x, .fa-fw);
  &:before {
    &:extend(.fa-cog:before);
  }
}

HTML：

<i class="spinner-cog"></i>

CodePen 示例：https://codepen.io/davidtovt/pen/QvJzjy

【讨论】：

您需要使用 Font Awesome LESS - 相反，您必须使用 FA 的 CSS 版本，因为在 Less 版本中，这些类中的大多数定义为 .@{fa-css-prefix}-cog ... extend 将无法使用。此外，您还需要extend all，因为大多数这些样式实际上都是:before 选择器，
CSS 作为 LESS。仅包含 CSS 时，.less 文件中的 extend 不起作用。
Fixed codepen （不是答案中的那个不正确，但是如果它实际上没有显示任何图标，那就有点混乱了）。