Mutiple SASS files structure

ionic-v1
1

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 ionic.app.scss 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 ionic.app.scss?

Thanks! :smile:

2

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…

app/
  scss/
    main.scss
    _vars.scss
    _mixins.scss
    _someOtherComponent.scss

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 ionic.app 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
3

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 ionic.app.scss 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 ionic.app.scss file (or is it optional) ?

Sorry if I misunderstood something.
Thanks.

4

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

You must define your variables before the ionic variables are imported to override them. See http://learn.ionicframework.com/videos/sass/ for more information.

No prob!

1 Like
5

Thanks a lot @djett!

1 Like