CODEWITHSUNDEEP
cssless
Matt
Matt

Reputation: 2327

How to modularize one LESS stylesheet into multiple stylesheets?

I am looking to take my styles.less file (which currently contains 3000 lines of stylesheet code for my entire site) and break it apart into multiple stylesheets, i.e. navigation.less, buttons.less, footer.less, etc.

I suppose I would then @import all of these individual stylesheets into a master stylesheet, such as all.less which would compile/minify down to all.css

One issue I am experiencing with breaking this styles up into individual sheets is that variable references are broken. So for example, if I port over my buttons CSS to buttons.less, my buttons CSS contains references to LESS variables that are defined in styles.less. How do I fix this issue?

Is there a better approach to modularizing my CSS code with LESS? 3000 lines of LESS code is getting completely unmanageable for one file and I need to break it up.

Upvotes: 1

Views: 539

Answers (1)

ScottS
ScottS

Reputation: 72261

Most people handle this by having two particular files, something like variables.less and mixins.less.

Then if these are needed in the modules, you use import-once instead of just import (for versions prior to the at present upcoming 1.4; at which time import by default will act as import-once). You use this in both the module files and in your all.less. That way when they are all brought together inside the all.less file, the imports only occurs once at the top of the final file, and not for each individual module file loaded.

Upvotes: 3

Related Questions