较少的继承"virtual"类

Question

我使用SASS，有一个很好的功能：我可以创建"fake/virtual"类，然后使用它进行扩展
示例：

%myFakeClass
{
  color:#fff;
  background-color:#000;
}
.myRealClass
{
   @extend %myFakeClass;
}
.myRealClass2
{
   @extend %myFakeClass;
}

输出：

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

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

Answer 1

尚未直接

截至目前（2013年11月22日），仍有一个功能请求允许通过对空参数mixin（其本身不输出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

也许以下内容有助于您在编译Bootstrap 3 RC1时从Why中获得img { &:extend(.img-responsive); }，而Lessc没有？

更新来自How do I create a mixin using less.js that not'；t在最终样式表中输出：

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

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

我们有另一个导入选项-引用。这意味着任何变量、mixin或选择器将被导入，但永远不会输出。

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

然而，如果你写一个这样的混合：

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

即使不使用，它也会像普通类一样显示出来。显然，它看起来就像一个普通的类，可以自己使用，也可以作为一个mixin使用，就像这样：

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

这将编译为：

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

它是有效的，但在这种情况下，.myMixin也会出现在您的样式表中。

但是，正如我所说，在我最初的例子中，它不会。