Less inherit "virtual" class

Question

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;
}

Output:

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

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.

Answer 1

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.

Workaround for now

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;
}

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);
}

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;
}

Answer 2

Maybe the following helps you img { &:extend(.img-responsive); } from Why gives Grunt / Recess an error and Lessc not when compiling Bootstrap 3 RC1?

update from 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();
}

since LESS 1.5 you could also place you virtual classes in a separate file and use: @import (reference) "file.less";

We have another import option - reference. This means that any variables or mixins or selectors will be imported, but never output.

Answer 3

I'm not entirely sure if @extend works the same as a "mixin", but it looks the same.

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

.myRealClass
{
   .myFakeClass();
}

.myRealClass2
{
   .myFakeClass();
}

The out put for this would be the same as what you have above. I added variables in the mixin for easier customization for this mixin.

Example:

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

The output for all three classes would be:

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

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

Like I said, I'm not entirely sure if there is a big difference between extending a class in SASS and using a mixin in LESS. Hope this helps either way.

---

Oh, and just to clarify, if the .myFakeClass() class is in a separate .less file that is imported, it will not show up in your CSS unless it is used. I tested this on a website I'm building. I have:

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

The class .box-shadow does not show up in my CSS at all.

Link: http://lucienconsulting.com/gs-news/wp-content/themes/TheStone/css/style.css

However, if you write a mixin like this:

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

It will show up like a normal class even if not used. Obviously, it looks just like a normal class and could be used by itself, or as a mixin, like so:

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

This would compile to:

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

It works, but .myMixin would also show up in your style sheet in this case.

But, like I said, in my original example, it would not.