LESS: Inheritance using a variable

Question

I am learning to use a CSS preprocessor for the first time (LESS) and having trouble with trying to define a class which inherits a class when that parent class is a variabl

Answer 1

Assuming you use WE2012 that includes Less 1.4.2 the simplest solution would be:

@import (less) "../font-awesome.css";

.icon-application-home {
    &:extend(.fa, .fa-home all);
}

Or:

@import (less) "../font-awesome.css";

.icon-application-home
    :extend(.fa, .fa-home all) {

}   

Read extend documentation for details on how this stuff works.

---

If you upgrade to an IDE/Compiler incorporating Less 1.6.x you will be able to do:

@import ".../font-awesome.less"

.icon-application-home {
    .fa;
    &:before {content: @fa-var-home}
}

There you still can't use .fa-home or .fa-home:before as mixins since the first is not defined and the second is not valid mixin selector, fortunately &:before {content: @fa-var-home} is just what .fa-home does. In general though, the extend based solution is more optimal since it produces more compact CSS.