Question

I have vars.less file with code like below:

@base: #96959A;
.ts_no{ text-shadow: none; }
.pos { position: absolute; z-index: 2; display: block; }

…

Compiled vars.css:

.ts_no {
  text-shadow: none;
}
.pos {
  position: absolute;
  z-index: 2;
  display: block;
}

And I have a few less files, which includes vars.less (@import ‘vars’). So all of these files have vars.less styles. So all of compiled css files includes compiled vars.less file’s styles:

style.css:

.ts_no { text-shadow: none; }
.pos { position: absolute; z-index: 2; display: block; }

…

What is the best way to have variables and mixins in one file, and not repeat it in all files?

Thank You

Answer 1

Probably the simplest way is just to define your mixins as parametric mixins, akin to “functions” in other languages. Of course, usually parametric mixins take parameters, but if yours don’t need to accept any parameters, you can simply omit them and use empty parentheses.

That would mean re-writing your vars.less file like so:

@base: #96959A;
.ts_no() { text-shadow: none; }
.pos() { position: absolute; z-index: 2; display: block; }

And that will prevent the ruleset from appearing in your compiled CSS output whenever it is not explicitly used within another ruleset.

The documentation provides more details.