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 design like this:

default_background_color = #F2F2F2
default_foreground_color = #333
default_highlight_color = #77b6f9

You could then use these variables all throughout your code instead of having to type them out multiple times:

body {
  background-color: default_background_color;
}
a {
  color: default_highlight_color;
}
hr {
  border-color: default_foreground_color;
}
.post {
  border-color: default_highlight_color;
  color: default_foreground_color;
}

After the preceding Stylus code was compiled into CSS, it would look like this:

body {
  background-color: #F2F2F2;}
a {
  color: #77b6f9;
}
hr {
  border-color: #333;
}
.post {
  border-color: #77b6f9;
  color: #333;
}

So not only have you been saved the trouble of typing out these color code values repeatedly, which in a real style sheet means a lot of work, but you can also now easily update the color scheme of your site simply by changing the value of the variables you created.

Variables are very handy for many purposes, as you'll see when we get started on theme creation.

Stylus code uses a syntax that reads very much like CSS, but with the ability to take shortcuts in order to code faster and more smoothly. With Stylus, you don't need to include curly braces, colons, or semicolons. Instead, you use tab indentations, spaces, and new lines.

For example, the code used in the last section could actually be written like this in Stylus:

body
  background-color default_background_color

a
  color default_highlight_color

hr
  border-color default_foreground_color

.post
  border-color default_highlight_color
  color default_foreground_color

You may think at first glance that this code is more difficult to read than regular CSS; however, shortly we'll be getting you running with a syntax highlighting package that will make your code look like this:

With the syntax highlighting package in place you don't need punctuation to make your code readable as the colors and emphasis allow you to easily differentiate between one thing and another.

The chances are very high that you'll find coding in this manner much faster and easier than regular CSS syntax. However, if you're not comfortable, you can still choose to include the curly braces, colons, and semicolons you're used to and your code will still compile just fine.

The golden rules of writing in Stylus syntax are as follows:

Mixins are a very useful way of preventing yourself from having to repeat code, and also to allow you to keep your code well organized and compartmentalized. The best way to understand what a mixin is, is to see one in action. For example, you may want to apply the same font-family, font-weight, and color to each of your heading tags. So instead of writing the same thing out manually for each H tag level, you could create a mixin as follows:

header_settings()
  font-family Georgia
  font-weight 700
  color #454545

You could then call that mixin into the styles for your heading tags:

h1
  header_settings()
  font-size 3em
h2
  header_settings()
  font-size 2.25em
h3
  header_settings()
font-size 1.5em

When compiled, you would get the following CSS:

h1 {
  font-family: Georgia;
  font-weight: 700;
  color: #454545;
  font-size: 3em;
}

h2 {
  font-family: Georgia;
  font-weight: 700;
  color: #454545;
  font-size: 2.25em;
}
h3 {
  font-family: Georgia;
  font-weight: 700;
  color: #454545;
  font-size: 1.5em;
}

As we move through the Ghost theme development process, you'll see just how useful and powerful Stylus is, and you'll never want to go back to handcoding CSS again!