How can I structure a Sass project

Hello everybody... I already told that I want to write few things about SASS because SASS surprise me a lot. I want to share my regular experience just. Hopefully it will be helpfully for beginner of SASS.

I am working a large application and when it built we did not think that we never use SASS or something. But after two year pass our team leader think that we need to mange our css more effective way. How can we do it? My answer was lets jump into SASS. So it the beginning of mine about SASS.

Sometime if CSS file being large, usually we break-down whole CSS file into each different files. Then we import it into main CSS file. But problem is in main CSS file, ok called it 'style.css' when we import our css file into it... each import we sent a request into server. and all developer want to reduce server hit. But SASS give me a solution also I can break-down my scss file.

Let me tell you, how we can separate our large css file into different SCSS file and what is the folder structure...

Make separate SCSS file by their nature. Note: Before the file name add [ _ ] sign. Something like _button.scss or _input.scss. This underscore sign [ _ ] told sass converter that it is supporting file, you don't need to covert is as css. After that you need to just import in your main SCSS file. just like @import '_fileName' oh you don't to need write file extension also.

A useful tip:

Now a day when we developed a larger application sometime we depended some third party scripts. and those third party script has css files. So we can separate those and make new SCSS file then we import it in our main style.scss file. It is good practice.



Here is a example how we can break them.

I always think that SASS is not very problematic but before SASS is hard. So I make two article for that.

Happy SASS