Creating CSS via the Stylus preprocessor

Instead of manually typing out each line of CSS you're going to require for your Ghost theme, we're going to get you set up to become highly efficient in your development through use of the CSS preprocessor named Stylus.

Stylus can be described as a way of making CSS smart. It gives you the ability to define variables, create blocks of code that can be easily reused, perform mathematical calculations, and more. After Stylus code is written, it is compiled into a regular CSS file that is then linked into your design in the usual fashion.

It is an extremely powerful tool with many capabilities, so we won't go into them all here; however, we will cover some of the essential features that will feature heavily in our theme development process.

Variables

Stylus has the ability to create variables to hold any piece of information, from color codes to numerical values for use in your layout. For example, you could map out the color scheme of your...