Mutiple SASS files structure

Hi everyone!

Today I was trying to figure out a good way to use mutiple sass files in my project.

Right now I’m basically creating mutiple sass files under css directory importing them all in style.csss (at the same directory) and finally importing the style.css in the file.

I’m pretty sure that’s not even close the best way to do it.

Is there any convention about using many sass files or should I simply put all my sass code in the

Thanks! :smile:

You should put your sass/scss files in a scss directory, then use grunt/gulp to compile a main scss file and compile it to a main css file which is imported in your index…

For example, your directory structure would look like…


your main.scss would then import all your partials, or files prefixed by _ . You could also import the ionic.scss file (AFTER your custom variables partial) so you can override any ionic scss.

Then grunt/gulp would compile main.scss (which imports all partial files), and then puts it in a css folder in your build directory (for example www/css/main.css)

the main.css file is what’s referenced from your index.html which would then contain all your custom scss and ionic scss compiled into a single css file. (you dont have to call it main… it could be like you specified above…

Probably confusing at first, but start tackling each section on at a time and you will get the point.

1 Like

Thanks a lot @djett !

I was just wondering… what if I create the partials in the scss folder and then import them directly in the file?

“(AFTER your custom variables partial) so you can override any ionic scss.” <- that would be the reason? couldn’t I just override the variables inside the file (or is it optional) ?

Sorry if I misunderstood something.

Yes @drodrigo you would have all your files in the scss folder, and import the partials in your file.

You must define your variables before the ionic variables are imported to override them. See for more information.

No prob!

1 Like

Thanks a lot @djett!

1 Like