dotlesscss: How to change variables value from importer dotlesscss stylesheet
I would like to use a base stylesheet with the colours defined as dotless variables. Then, depending on the color theme that I use I would 开发者_StackOverflow中文版like to change this colors.
- example of base stylesheet:
body
{
color: @brand_color;
}
- Example of specific stylesheet, depending in the color scheme I pick:
@import "../BaseStyleSheet.less.css";
@brand_color: green;
How can I achieve this?
You need to change the extension of your imported file to .less
Less only compiles imports if they end in .less if they end in something else it takes the content of the file literally and just inserts it in your file.
Also note that you may have to put the @brand_color: green
declaration before the import so the imported file can access it.
The extension of the imported file should be ".less".
Changing the variable value after or before the import statement makes no difference, it just doesn't change the variable value, making what I wanted not possible.
"Imports will not have access to variables in the main reference Less file (or other referenced Less files in the main one). This ensures that imported Less files have no dependencies on where they are been used."
http://enginechris.wordpress.com/2009/11/23/my-thoughts-on-using-dotless-and-the-less-syntax/
精彩评论