Forward Advance Learning

Variables

We can define variables in SASS using a dollar, like so:

$gutter: 100px;

We can then make use of this standard variable anywhere we like:

header {
margin: $gutter;
padding: $gutter;
}

Colours

This is very useful for hex codes. We can share standard colours across an application.

If we have CSS like this:

a {
color:#f00;
}

We can write this:

$red: #f00;
a {
color:$red;
}

We might later change the value of $red:

$red: #dd4455;

Wherever we have used $red in our application, this hex code will be changed.

A bank of colours

We might create a set of standard colours, and reuse them. We can then create variables to represent certain common parts of our application, like dialog backgrounds or keylines:

$dark_grey: #444;
$light_grey: #bbb;
$keyline_color: $light_grey;
header {
border-bottom: 1px solid $keyline_color;
}
sidebar {
border-right: 1px solid $keyline_color;
}

Exercise - Colours and padding

Download the exercise start point. You'll find an HTML file with a header an article, and a footer.

Add common margins and padding on the header, article and footer.

Create a dark grey colour for the body text, and a slightly lighter grey colour for the headings.

Create a $desktop_width variable:

$desktop_width: 1000px;

Set a max-width on the body, so the content will stretch to 1000px, then stop.