Forward Advance Learning

Maths

We can perform maths functions in our SASS to generate sizes. Here is a simple 2 column layout with a gutter.

$desktop: 1000px;
$gutter: 20px;
body {
width: $desktop;
}
article {
width: $desktop / 3 * 2 - $gutter;
float:left;
}
aside {
width: $desktop / 3 - $gutter;
float:right;
}

The widths will be dynamically generated. You don't need to worry about adding percentages to pixels. It all just works beautifully. (of course CSS is still what it is, but pixel sizes can help.)

We'll see later how we can extend this to create beautiful responsive layouts.

Typography

We can use maths to create beautiful typography. To create harmonious type, it can help if we use a multiplier, so an <h2> is exactly 1.5 times larger than standard body text, and an <h1> is 1.5 times larger again.

Playing with these numbers gives more extreme effects. We might want to use a different multiplier altogether for mobile devices.

We might do something like this:

$base_font_size: 14px;
$font_scale: 1.5;
$small: $base_font_size / $font_scale;
$normal: $base_font_size;
$large: $base_font_size * $font_scale;
$larger: $base_font_size * $font_scale * $font_scale;
body, input, textarea {
font-size: $normal;
letter-spacing: 0.01em;
line-height:2em;
}
h2 {
font-size: $large;
font-weight:normal;
letter-spacing: -0.01em;
}
h1 {
font-size: $larger;
letter-spacing: -0.02em;
}

A tiny bit of simple sass like this can lift our design, and give our words consistency, character and weight.

Exercise - Typography

One excellent use for SASS is typography. In this exercise, we will use some maths to create harmonious px sized typography across our site.

  • Create a $font_size variable (12px) and a $font_scale variable (1.5).
  • Set the body font-size to be the same as the $font_size variable. Be as smart about this as you like.
  • Set the h2 font-size to be $font_size * $font_scale
  • Set the h1 font-size to be $font_size $font_scale * 2
  • Adjust the $font_size. See how everything updates. Woot!

Exercise - Floats

We can use SASS to create layouts.

Create a $desktop variable that contains the value 1000px.

$desktop: 1000px;

Float the article and aside left. Set widths on the article and aside, so that the article is 75% of the $desktop, and the aside is 25%. This will create a two colum float layout.

Extension

Add a header and footer.