Using Jekyll's inbuilt sass/scss compiler

[vg]

Jekyll comes with its own built-in sass/scss compiler. Which also combines multiple @import source files into one css file, and also minifies and compresses the css file. Github Pages has built-in support of this sass-compiler.

Is there a way to start using the Jekyll's scss compiler it instead recompiling the scss files using node.js and npm every time the stylesheets needs to be changed.

http://markdotto.com/2014/09/25/sass-and-jekyll/
https://jekyllrb.com/docs/assets/#sassscss

[mmistakes]

Yes and no. The theme could absolutely use Jekyll's built-in support for Sass and process main.scss that way, but there's a few tradeoffs.

The big one is I've decided to write the CSS without vendor prefixes and let tools like Autoprefixer handle them. It leaves you with cleaner code and is one less thing to maintain as browsers continue to evolve and update.

The problem is you either need a Jekyll plugin (not supported with GitHub Pages) to run the CSS through Autoprefixer or have an extra build step outside of Jekyll (what I've done) that does it for you.

If your site is targeting modern browsers than piping the CSS through Autoprefixer is probably not something you need to worry about. In that case you could easily reorganize the .scss partials into folders Jekyll looks for and configure Sass there.

I'm hoping that the Jekyll Assets plugin eventually gets whitelisted for GitHub Pages and then I can switch to that since it supports Autoprefixer... among other things.

Update 8/8/2016: Not as nice as using Jekyll Assets or other plugin that supports Autoprefixer, but with this Sublime Text plugin CSS and SCSS files can be updated. Should allow moving these files back into _sass so Jekyll can process them instead of using the included npm run build:css script.