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.

Variables

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

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;
}
}

Partials

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.

Import

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.

@import

"base",
"layout",
"syntax-highlighting"
;

Compression

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

sass:

style: compressed