less.css sharing variables across files

less
vondip picture vondip · Oct 13, 2011 · Viewed 38.9k times · Source

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

Answer

Nathan Strutz picture Nathan Strutz · Oct 13, 2011

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

Related questions

Correct way to create rounded corners in Twitter Bootstrap

I've just started with Twitter Bootstrap and here is one question. I am creating custom <header> block, and I want it's bottom corners to be rounded. Is there any "correct" way to do this by using predefined classes, …

Read More
Is it possible to use vh minus pixels in a CSS calc()?

I have following CSS rule in a Less file: .container { min-height: calc(100vh - 150px); } Which doesn't work at all. I want to make container full window height and minus header, footer fixed height. How can I do that?

Read More
Understanding Bootstrap's clearfix class

.clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0; } &:after { clear: both; } } Why not use display:block? In addition, why does it also apply to the ::before pseudoclass?

Read More