less.css sharing variables across files

Question

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;
}

Frederik Struck-Schøning · Accepted Answer · 2017-08-08 13:48:51Z

83

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";

edited Aug 8, 2017 at 13:48

Frederik Struck-Schøning

13.3k9 gold badges63 silver badges70 bronze badges

answered Oct 13, 2011 at 17:51

Nathan Strutz

8,1331 gold badge41 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vondip Over a year ago

interesting, though I need to share a conditional css file, english can be replaced with German, Russian etc. Can I import css libraries conditionally?

Nathan Strutz Over a year ago

Interesting, I didn't understand that problem from your initial question. LESS has no conditional statements (yet), so you have to think declaratively. Make an englishContainer.less file that imports english.less and chart.less, then a germanContainer.less file that imports german.less and chart.less, etc, that's probably the way to do it.

Collectives™ on Stack Overflow

less.css sharing variables across files

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related