DEV Community

Discussion on: What is a problem you constantly have with CSS, or something you keep wanting to learn how to do?

Collapse
 
sonawaneapekshit profile image
sonawaneapekshit • Edited

How to plans Sass/Less structure for project? Some times i keep mixins and variables in same files as main Sass/Less. need extra time to optimize the Structure.

Collapse
 
5t3ph profile image
Stephanie Eckles

I'm a very avid Sass user, and I love the ability to prefix file names with an underscore like _mixins.scss so that the file doesn't compile to its own CSS file but you can include it wherever you need it with an import.

If it's a small project, you may be ok with one _mixins.scss file and perhaps one _variables.scss file, but if it's larger and you're creating lots of distinct components, you may nest them into the component structure like:

CardComponent/
    _mixins.scss
    _variables.scss
    _card.scss

So that mixins and variables are local to the component but a bit more organized, and then you would import just the card file into a main Sass file to be compiled to your final. Just one option!

Collapse
 
sonawaneapekshit profile image
sonawaneapekshit

Thanks for your help :)