Learning to use a modular approach. Have to save multiple files to see result of css?

Question

Ok, I am trying to learn to use a modular approach to my css for scalable and modular development. My file structure is similar to this.

File Structure

Now, I have a red border on every element that I toggle on and off it helps me visualize as I position elements. Its the first line of code in my _grid.sass file. I have a single file named main.sass with only

@import '_base.sass' 

@import '_grid.sass' 

@import '_colors.sass'

inside of it. Then, I use atom editor's auto compile to convert main.sass into main.min.css which is linked to the html file. So if I turn off the border property in _grid.sass. I have to save that file, then save main.sass, then save _grid.sass again. I have to be doing something wrong, because if I want to develop an entire site like this, I will have to save 3 times for each individual change, and that will add up to about 5 million redundant saves a minute. Can someone give me some information on this?

Answer 1

I'm assuming you are using the sass-autocompile package. While this is great for single file projects, it doesn't work so well for larger projects.

Instead I would advise using a build system like gulp or grunt. I am more familiar with gulp, so here is a modified version of my build system to work with your project structure.

In order to use this you will need to install gulp and the other packages imported.

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');

gulp.task('default', function() {
    return gulp.src('stylesheets/main.scss')
        .pipe(
            sass({
                outputStyle: 'compressed',
                includePaths: ['stylesheets/modules', 'stylesheets/partials', 'stylesheets/vendor']
            }).on('error', sass.logError)
        )
        .pipe(rename('compiled.css'))
        .pipe(gulp.dest('stylesheets'));
});

Also, you don't need to (and shouldn't) include the underscore and extension in your partial names, so use @import 'base'; instead of @import '_base.scss';

Learning to use a modular approach. Have to save multiple files to see result of css?

Sign up