New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Jekyll's inbuilt sass/scss compiler #333

Closed
vg opened this Issue Jun 1, 2016 · 1 comment

Comments

Projects
None yet
2 participants
@vg
Copy link

vg commented Jun 1, 2016

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

@vg vg changed the title Using Jekyll's inbuilt sass Using Jekyll's inbuilt sass/scss compiler Jun 1, 2016

@mmistakes

This comment has been minimized.

Copy link
Owner

mmistakes commented Jun 1, 2016

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.

@mmistakes mmistakes self-assigned this Aug 8, 2016

mmistakes added a commit that referenced this issue Aug 8, 2016

Use Jekyll native Sass/SCSS preprocessor
- Move .scss files to default `_sass` folder
- Configure Sass/SCSS in `_config.yml`
- Run .scss files through Autoprefixer
- Remove unnecessary npm scripts for building CSS
- Close #333

@mmistakes mmistakes closed this in 23ea0e8 Aug 8, 2016

carlesfernandez added a commit to gnss-sdr/geniuss-place that referenced this issue Sep 10, 2016

cjmadsen pushed a commit to cjmadsen/cjmadsen.github.io that referenced this issue Dec 7, 2016

jluccisano added a commit to jluccisano/jluccisano.github.io that referenced this issue May 6, 2017

Use Jekyll native Sass/SCSS preprocessor
- Move .scss files to default `_sass` folder
- Configure Sass/SCSS in `_config.yml`
- Run .scss files through Autoprefixer
- Remove unnecessary npm scripts for building CSS
- Close mmistakes#333

antonizoon pushed a commit to antonizoon/antonizoon.github.io that referenced this issue Jul 27, 2018

Use Jekyll native Sass/SCSS preprocessor
- Move .scss files to default `_sass` folder
- Configure Sass/SCSS in `_config.yml`
- Run .scss files through Autoprefixer
- Remove unnecessary npm scripts for building CSS
- Close mmistakes#333
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment