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.

Answer 2

Standard way to do this is to separate sass files form compiled css files. In your my_theme_main_folder create folder sass and move all the scss files to it, including partials (you can structure them as you like).

Then run from the level of my_theme_main_folder:

sass --watch sass:css

It will watch the whole my_theme_main_folder/sass folder and compile everything to my_theme_main_folder/css folder on any change in the first folder.