CSS-Redundancy when using LESS and its @import

Question

I really like the idea and the concept of LESS. Yet I stumbled upon a bug, which i reported quite a while ago to the author but did not yet get any feedback. Maybe it's just me who is doing something wrong.

My application.less-File that looks similar to this:

@import "reset";
@import "config";
@import "header";
@import "forms";
[…]

I like that it is possible to use the @import rule to split up my files to gain a better overview of my css-declarations. Yet every imported file needs to re-import the config.less-File again to be able to make use of the mixins and variables i defined in there.

I bet you already know about what kind of redundancy I am driving at: Everytime the config.less is imported, its "output" becomes part of the application.css.

My config-file contains about 200 lines of code. Since I split up my CSS-into about 5 files (based on my controller names) that need to re-import the config, I end up having about 1000 lines of generated CSS-Code that are 100% redundant.

Only solution that I can come up with is not to split up my files, what I really like to avoid.

score 12 · Accepted Answer · answered Jan 25 '10 at 23:01

12

Although not ideal, the practical reason for this is that the files you import theoretically don't need to contain any CSS. Typically, you would have variables and dynamic mixins, which don't contribute to your CSS output:

lib.less:

#colors {
    @blue: #0011ff;
    @red: #ee2222;
}
.button (@width: 10px) {...}

main.less:

@import "lib";

a { color: #colors[@blue]; }

output, main.css:

a { color: #0011ff; }

#colors {} and .button will not be output in this case.

answered Jan 25 '10 at 23:01

cloudhead

15,253
6
42
37

2

Have you thought of implementing something like @load/@require to import a file without output. That'd be nice. But I'll try to adjust my code accordinung to your hints. – nocksock Jan 26 '10 at 08:15
And i just noticed that you cannot use nesting inside dynamic mixins. So this is doesn really work for me unfortunately. – nocksock Jan 26 '10 at 09:42
2

Yea, to be honest, these are things I'd like to have eventually, but just haven't found the time to implement. – cloudhead Jan 26 '10 at 18:29
1

This would certainly be an awesome feature! We're using Bootstrap from Twitter, and it would be of much help to reuse and extend classes Bootstrap has already defined, without outputting all the bootstrap declarations. – aliz_bazar Dec 29 '11 at 09:06

score 4 · Answer 2 · edited Jan 07 '14 at 15:43

4

LESS now supports @import-once "stylename.less";

edited Jan 07 '14 at 15:43

rink.attendant.6

44,500
61
101
156

answered Oct 30 '12 at 11:57

AuthorProxy

7,946
3
27
40

score 0 · Answer 3 · answered Jan 25 '10 at 12:55

0

Maybe you can split them up in your development environment and then merge them together, not needing all the extra code, when you deploy to your live web server?

answered Jan 25 '10 at 12:55

Jacob Rask

22,804
8
38
36

But then the question is how to automatically merge them. – nocksock Jan 25 '10 at 15:53

score 0 · Answer 4 · answered Dec 15 '10 at 21:53

You can use dynamic mixins in your LESS config file if they are declared and mixed-in using $ instead of ..

In config.less:

$mixin
{
  a { color: @light; }
  h2 { //etc.
}

In header.less:

@import "config";
.header
{
  $mixin;
}

Source. I've also tried this and it works.

CSS-Redundancy when using LESS and its @import

4 Answers4

Linked