Less CSS import structure

Question

I have a really big .less file that I am trying to break into smaller files for readability purposes.

But the files I am importing rely on variables and mixins from the main.less file...so they don't compile on their own.

Should I just include the variables and mixins at the top of both files, or is there a better way to go about this?

Answer 1

You don't need to include the variables in every file if you include them in your main.less file.

/* main.less */
@import mixins.less
@import one.less
@import two.less

Assuming that you're only loading main.less in your site, when you work on one or two , the variables from mixins should work just fine since everything will be compiled into main.less .

Answer 2

If the variables and mixins are independent of the other styles (as they probably should be) you could create separate files for both variables and mixins...

- less_directory
  |-- mixins.less
  |-- variables.less
  |-- style1.less
  `-- style2.less

..and then just import them as needed.