较少继承“虚拟"信息.班级 [英] Less inherit "virtual" class

问题描述

我正在使用SASS，并且有一个不错的功能:我可以创建假/虚拟"类，然后将其用于扩展.
示例:

I am using SASS and there is nice feature: I can create "fake/virtual" class and then use it for extend.
Example:

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

.myRealClass
{
   @extend %myFakeClass;
}

.myRealClass2
{
   @extend %myFakeClass;
}

输出:

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

问题:
LESS是否有类似的东西?换句话说，我想创建一个可以继承的虚拟类"，但是输出中不存在虚拟类"本身.

The question:
Does LESS has something similar? In other words, I want to create a "virtual class" that I can inherit from, but the "virtual class" itself not exists in output.

推荐答案

尚未直接发布

截至该日期(2013年11月22日)，仍然存在功能请求，这可以通过扩展空参数mixins(本身不输出css)来实现.因此， 最终 是可能的(它几乎完全反映了您想要的内容):

Not Directly as of Yet

As of this date (11-22-2013) there is still a feature request that would allow this by doing extending on empty parameter mixins (which do not output css themselves). So eventually something like this would be possible (which mirrors almost exactly what you want):

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

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

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

并按预期输出.

And output as you expect.

这是巴斯·乔布森(Bass Jobsen)提到的，但没有明确说明.在LESS 1.5中，您为假类创建一个文件，例如fakeClasses.less，在我们的示例中包含以下文件:

This was mentioned by Bass Jobsen, but not explicitly demonstrated. In LESS 1.5, you build a file for your fake classes, say fakeClasses.less, which for our example has this in it:

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

然后在文件中想要扩展到该文件，例如styles.less，您可以执行以下操作:

Then in your file that you want to extend to it, let's say styles.less, you do this:

@import (reference) fakeClasses.less;

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

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

这将导入fakeClasses.less类，但不会将其编译为css(因此它们在styles.less上下文中是伪"的，但是在它们的真实"中，它们可以扩展为)，您将 获得所需的输出结果 .

This will import the fakeClasses.less classes but NOT compile them to css (so they are "fake" within the context of styles.less, but "real" in that they can be extended to), and you will get the output you expect.

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

这篇关于较少继承“虚拟"信息.班级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！