Question

我想创建一个抽象的css类名。

//icons.less (from icomoon)
.icon-arrow-down:before {
  content: "\e600";
}

//abstract class name that re-uses existing class name
//compiling lesscss fails at this line
.icon-open-menu:before {
    .icon-arrow-down:before;
}

$ gulp build-less
[17:30:18] Using gulpfile ~/projects/foo/gulpfile.js
[17:30:18] Starting 'build-less'...

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Unrecognised input in file
/Users/user/projects/foo/less/icons.less line no. 138

在我引用像.clearfix;之类的现有课程之前，我已多次这样做了，但它似乎无法在这里工作。

Answer 1

作为Jerreck mentioned的替代方案，您还可以使用extend来实现类似的结果：

.icon-arrow-down:before {
  content: "\e600";
}
.icon-open-menu:before {
  &:extend(.icon-arrow-down:before);
  color: red;
}

输出：

.icon-arrow-down:before,
.icon-open-menu:before {
  content: "\e600";
}
.icon-open-menu:before {
  color: red;
}

Answer 2

你拥有的不只是一个类，它是一个附加了伪指示符的类。

在LESS中，您可以通过使用以下语法将伪嵌入选择器嵌入选择器中来附加伪选择器：

.icon-arrow-down {
  &:before {
     content: "\e600";
  }
}

然后你可以将你的类重用为这样的mixin：

.icon-open-menu {
  .icon-arrow-down;
}

这将输出：

.icon-arrow-down:before {
  content: "\e600";
}
.icon-open-menu:before {
  content: "\e600";
}

试图在lesscss中重用现有的类

2 个答案: