less.css sharing variables across files

Less

Less Problem Overview


I am using less.css to simplify my css styling. I'd like to declare a varaible in one less file and share its usage across my many less files. Is this possible? For example:

english.less > @languageFloat: left;

chart.less

div#footer a.web
{   
    display: block;
    float: @languageFloat;
    color: #cccccc;
    margin-right: 10px;
}

Less Solutions


Solution 1 - Less

The best way to do this is to @import your LESS file with all your variables in it. Here's the syntax for the @import keyword:

// For LESS file includes,
@import "lib.less";
// or
@import "lib"; // infers the .less extension

// and for plain CSS includes which are added but not parsed by LESS
@import "style.css";

This works especially well if you serve CSS files to your users (as opposed to the in-browser less.js parsing) because the @import statement will compound your LESS and CSS files into one single CSS file. Maybe you can consider having one controller LESS file that includes your variables, then your other LESS and CSS files so that the end result is one single file you serve to the browser.

I imagine it would be something simple like this:

// Controller.less
@import "english.less";
@import "chart.less";

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionvondipView Question on Stackoverflow
Solution 1 - LessNathan StrutzView Answer on Stackoverflow