Question

我正在使用SASS并且有一个很好的功能：我可以创建“假/虚拟”类，然后将其用于扩展。
示例：

%myFakeClass
{
  color:#fff;
  background-color:#000;
}

.myRealClass
{
   @extend %myFakeClass;
}

.myRealClass2
{
   @extend %myFakeClass;
}

输出：

.myRealClass, .myRealClass2
{
  color:#fff;
  background-color:#000;
}

问题：
LESS有类似的东西吗？换句话说，我想创建一个可以继承的“虚拟类”，但“虚拟类”本身不存在于输出中。

Answer 1

尚未直接

截至此日期（2013年12月22日），仍有一个feature request允许通过扩展空参数mixins（不自行输出css）来实现此目的。所以最终这样的事情是可能的（几乎完全反映了你想要的）：

.myFakeClass() {
  color:#fff;
  background-color:#000;
}

.myRealClass {
   &:extend(.myFakeClass);
}

.myRealClass2 {
   &:extend(.myFakeClass);
}

并按预期输出。

现在解决方法

Bass Jobsen提到过这一点，但没有明确说明。在LESS 1.5中，您为假类建立了一个文件，比如说fakeClasses.less，我们的例子中有这个文件：

.myFakeClass {
  color:#fff;
  background-color:#000;
}

然后在你要扩展到它的文件中，让我们说styles.less，你这样做：

@import (reference) fakeClasses.less;

.myRealClass {
   &:extend(.myFakeClass);
}

.myRealClass2 {
   &:extend(.myFakeClass);
}

这将导入fakeClasses.less类，但不将它们编译为css（因此它们在styles.less的上下文中是“假的”，但是“真实的”，因为它们可以延伸到），您将 获得您期望的输出 。

.myRealClass, .myRealClass2 {
  color:#fff;
  background-color:#000;
}

Answer 2

也许以下内容可以帮助您Why gives Grunt / Recess an error and Lessc not when compiling Bootstrap 3 RC1?

img { &:extend(.img-responsive); } 来自How do I create a mixin using less.js that doesn't output in the final stylesheet的

更新：

.myFakeClass()
{
  color:#fff;
  background-color:#000;
}

.myRealClass, .myRealClass2
{
   .myFakeClass();
}

从LESS 1.5开始，您还可以将虚拟类放在单独的文件中并使用： @import (reference) "file.less";

我们有另一个导入选项 - 参考。这意味着任何将导入变量或mixins或选择器，但不会输出。

Answer 3

我不完全确定@extend是否与“mixin”相同，但它看起来是一样的。

.myFakeClass(@textColor: #fff, @bgColor: #000 )
{
  color:@textColor;
  background-color:@bgColor;
}

.myRealClass
{
   .myFakeClass();
}

.myRealClass2
{
   .myFakeClass();
}

这个的出局与你上面的相同。我在mixin中添加了变量，以便更轻松地自定义此mixin。

示例：

.myRealClass3
{
   .myFakeClass(#369, #00f);
}

所有三个类的输出都是：

.myRealClass, .myRealClass2
{
    color:#fff;
    background-color:#000;
}

.myRealClass3
{
   color:#369;
   background-color:#00f;
}

就像我说的，我不完全确定在SASS中扩展一个类和在LESS中使用mixin之间是否存在很大差异。希望这有助于两种方式。

哦，只是为了澄清，如果.myFakeClass()类在一个单独的.less文件中导入，除非使用它，否则它不会显示在CSS中。我在我正在建设的网站上对此进行了测试。我有：

.box-shadow(@a, @b, etc..) {
    box-shadow: @a @b etc..;
    -webkit-box-shadow: @a @b etc..;
    etc: @a...;
 }

班级.box-shadow根本没有出现在我的CSS中。

链接：http://lucienconsulting.com/gs-news/wp-content/themes/TheStone/css/style.css

但是，如果你写这样的mixin：

.myMixin{
  background: #000;
  color: #fff;
}

即使不使用它也会像普通类一样出现。显然，它看起来就像一个普通的类，可以单独使用，也可以像mixin一样使用，如下所示：

.myClass{
   .myMixin;
   border: 1px solid #fff;
}

这将编译为：

.myClass{
  background: #000;
  color: #fff;
  border: 1px solid #fff;
}

虽然有效，但在这种情况下，.myMixin也会显示在您的样式表中。

但是，就像我说的那样，在我的原始例子中，它不会。

少继承“虚拟”类

3 个答案:

尚未直接

现在解决方法