Should I have seperate SCSS files?

ionic-v1
1

Hi,
I am building a rather large application with Ionic. I was wondering if there was any benefit to splitting my SCSS into separate files?
It would make the code far more manageable for me but if the app has to load all the scss when it starts anyway then it makes more sense to limit the number of files. Am I wrong there?

Cheers
James

2

Personally I have lots of scss files. I have a gulp task that concatinates them all together and compiles to css. And I also have this task running as a watcher, so it will fire any time a scss file is changed.

In my index.html I only include a single css for my app. Can recommend this approach. I don’t remember what is included by default in the ionic gulpfile, but I use gulp-concat, gulp-sass and gulp-minify-css for this.It looks like this in my gulpfile:

var gulp = require('gulp');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

var paths = {
    sass: ['./scss/ionic.app.scss', './www/app/**/*.scss'],
    js:   ['./www/app/app.js', './www/app/**/*.js'],
    dist: './www/dist/'
};

gulp.task('sass', function(done) {
    gulp.src(paths.sass)
        .pipe(concat('app.scss'))
        .pipe(sass({
            errLogToConsole: true
        }))
        .pipe(gulp.dest(paths.dist))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest(paths.dist))
        .on('end', done);
});

gulp.task('watch', function() {
    gulp.watch(paths.sass, ['sass']);
    gulp.watch(paths.js, ['scripts']);
});
2 Likes
3

Is there any down side to doing this? Also thanks alot for the gulp example, I was trying to figure that out aswell

4

You are correct that when your app loads, if you have multiple CSS files referenced, it will have to load all of those, which is bad.

kstorstein’s suggestion is a great idea and I do the exact same thing in my projects.

I had a project and we had a separate CSS file for each route, so if the profile page looked weird, we knew where to look.

The issue with this is, it can make maintaining cross application styles tricky. Imagine if you defined margins in one view and then in another view, they were completely different? The trick is to have an app-wide scss file, for things like headers, margins, etc, and then have separate scss files for each route. Make sense?

5

Yeah we are following a little bit the ionic scss-file semantic. If we are creating or overwriting variables we have a variables.scss, for mixins a mixin.scss.

I think scss files for each view is a little bit tooo much. Because in most cases you have a common layout and only a view things differs. But that’s a matter of opinion.

And you do not need to change any gulp tasks because you can use simple the import-command in your ionic.app.scss

@import "_variables";

so your sources will be included and minified automatically.

6

Am I right in saying that you then have to have an @import for each .scss file outside of ionic.app.scss?

7

indeed, you are right :slight_smile: …
keep in mind to import variables and mixins before the other stuff

8

Perfect, thanks for the help :smile: