I have a .less
file where I keep all my global variables. For example:
lib.less
@primary-color: red;
.primary-font{
font-family:Arial;
}
On one of my pages I have a page-specific CSS file. For example:
Homepage.less @import "lib.less";
.Login
{
color:@primary-color;
.primary-font;
}
I preprocess LESS using dotless. This renders "Homepage.less" to the client as:
.primary-font{
font-family:Arial;
}
.Login
{
color:red;
font-family:Arial;
}
I don't want .primary-font
to be rendered as I'm only using this as a style collection for importing into other classes. The output I really want is:
.Login
{
color:red;
font-family:Arial;
}
Is there any way of importing styles from another .less
file for use in other classes, without them being rendered to the client?
This has nothing to do with MVC, this is something you have to do in the LESS itself. See: http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin
Essentially, if you don't want the mixin output as a class, you just need to suffix it with parenthesis:
.primary-font() {
font-family: Arial;
}