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?

elclanrs · Accepted Answer · 2012-03-06 22:46:14Z

5

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.

answered Mar 6, 2012 at 22:46

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rjz · Accepted Answer · 2012-03-07 15:28:27Z

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.

edited Mar 7, 2012 at 15:28

answered Mar 6, 2012 at 22:46

rjz

16.5k3 gold badges39 silver badges35 bronze badges

1 Comment

bzx Over a year ago

this is not the best approach (because you're repeating yourself), and this is NOT the approach that bootstrap takes. better to use one main.less file as the only one that gets compiled into css, and import everything there (as posted in the other answer)

Collectives™ on Stack Overflow

Less CSS import structure

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related