Modifying Jekyll Stylesheets SCSS / CSS

Question

New to Jekyll and decided to start with the Balzac theme hosted on GitHub Pages:

https://github.com/ColeTownsend/Balzac-for-Jekyll

Been having success modifying it to meet most of my needs, however I have never worked with sass/scss files and I simply cannot figure out how to change basic stuff like blockquote styling. I have tried: modifying directly in scss; modifying directly in css; modifying in scss and then outputting to css via Terminal; deleting all scss files and modifying the css by hand; deleting all css files and modifying the scss.

I've also tried moving all of the SCSS files into a top-level folder (_sass) and then pointing to that folder in my config file, but no changes I make seem to stick.

As you can see, I'm grasping at straws here. Hoping this might be a n00b thing that I'm just missing. Here is my site:

https://github.com/craigeley/craigeley.github.io

Any help much appreciated!

Found that adding the header worked, but I also found there are a few different ways to work with scss files in GitHub. One way is to put them in a top level folder and add the YAML header, as discussed below. Another is to simply compile them yourself locally and output and store them wherever you like. My actual problem was that I was working locally but when I served the site it was still pulling the css from GitHub. Had to comment out the base URL line in the config file for it to pull in my changes. Just wanted to add this update for others as a reference. — craigeley
I used to compile them myself, until I found that Jekyll could do that for me. That is, IMO, the most convenient way to deal with them. I have all my files locally (and have set them up thus, that I can simply load a file and can simply click for one of the others, i.e. I only use relative addressing to reach all of my files - no problems with URLs at all), so I never had your problem. — Rudy Velthuis

Rudy Velthuis Rudy Velthuis · Accepted Answer · 2014-06-18T07:27:05

I just looked. Your .scss files do not seem to contain a YAML FrontMatter header. Jekyll only touches files with such a header, even if it is just an empty one.

Since I assume you don't need to specify anything YAML in an SCSS file, an empty header (two lines of --- followed by an empty line) will do:

---
---

body {
  etc...

Since the SCSS syntax is, in essence, a superset of CSS, you can specify a blockquote style (or any other style) in the same way as you would do in CSS.

Modifying Jekyll Stylesheets SCSS / CSS

1 Answers