Learning to use a modular approach. Have to save multiple files to see result of css?
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?
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';