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 variable name..
This is basically what I want to do:
@import "font-awesome/font-awesome.less"
.icon-application-home{
.fa .fa-home;
}
but as fa is defined in Font Awesome as this:
@fa-css-prefix: fa;
then the less won't compile, because it doesn't recognize .fa. So I tried this instead:
@import "font-awesome/font-awesome.less"
.icon-application-home{
.@{fa-css-prefix} .@{fa-css-prefix}-home;
}
However that is not working either. Is there any workaround? What can I do here?
EDIT
I found half an answer here:
Missing Font-Awesome.less variables in my .less file after importing
This works (partly) if I do the following:
@import (less) "../font-awesome.css";
.icon-home {
.fa;
}
However, I noticed that .fa-home
does not exist... only .fa-home:before
... so I tried this:
@import (less) "../font-awesome.css";
.icon-home {
.fa;
.fa-home:before;
}
and
@import (less) "../font-awesome.css";
.icon-home {
.fa;
}
.icon-home:before {
.fa-home:before;
}
neither of these work. Any ideas?