How to handle partials in an scss project?

Question

Following problem: On my server I got a style.scss file in the main directory - I used sass --watch style.scss:style.css --style compressed and so everytime style.s

Answer 1

Yeah you have the right idea, you have to have something watch your Sass files if they update so it knows to build it out. Grunt and Gulp both have things that automate that for you.

Here's an example

gulp.task('sass', function () {
  return gulp.src('sass/**/*.scss')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(gulp.dest('./build/css/'))
    .pipe(notify({ message: 'CSS complete' }));
});

gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['sass']);
});

This depends on how you architect your Sass build structure though. So in the above example, we look in the folder /sass/ and compile out all the partials. I would read You can also take a look at SMACSS if you have the chance.

You can try using scaffolding tools like Sassy Sass to make it easy if you're too lazy to organize it yourself though.