Jekyll provides built-in support for Sass, a style sheet language, which includes features that extend the functionality of plain static CSS. These are some of the Sass features I used.


The use of variables is useful to keep colors and font sizes consistent throughout the web site.

$text-color: #333;
$brand-color: #090;

$base-font-size: 16px;
$small-font-size: $base-font-size * 0.875;


Nesting is good for writing CSS with a clear nested and visual hierarchy.

.post-list {
  margin-left: 0;
  list-style: none;

  > li {
    margin-bottom: $spacing-unit;

  :last-child {
    margin: 0;


Partial Sass files contain little snippets of CSS that can be included in other Sass files. This is a great way to modularize the CSS, keeping things easier to maintain.


Sass import can be used to concatenate all partials into a single file. The main benefit of a single style sheet is that it reduces the number of server requests when first loading the page.







I take advantage of the file size optimization available with Sass. In the _config.yml file I added this line to output compressed CSS.


  style: compressed