I'm trying to nest a bunch of font awesome styles into a single css class I can use whenever I'd like. However, I'm getting an error with "Undeclared Mixin".
My .less file looks something like this:
@import (reference) "../Content/bootstrap/font-awesome/font-awesome.less";
.step-current {
.fa;
.fa-play;
.text-success;
}
LESS is tripping up because Font Awesome doesn't style .fa-play
, only .fa-play:before
. Get around this by using LESS's :extend
syntax (see also this css-tricks write-up/tutorial). The key is the all
keyword, which will bring in the :before
styles.
.custom-class {
&:extend(.fa, .fa-play all);
.text-success
}
(Just guessing about what to do with your .text-success
- that doesn't appear to be part of Font Awesome… but then it wasn't part of your problem, so I guess it doesn't matter. You might need to use :extend
to pull it in, or you might be able to just use it as a normal old LESS mixin as I did above.)