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'
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';