SASS & SCSS

Posted on   |   In

SASS & SCSS

###Variables
We can declare variables in our file that we can reuse throughout our document. This is common for colours and font stacks, and is probably one of the most handy uses of variables off the bat. Here’s the SCSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$pad : 2em;
$color-primary : rgb(40,40,40);
$color-secondary : rgb(40,170,220);
body {
  background-color: $color-primary;
}
h1 {
  color: $color-secondary;
}
.container {
  padding: $pad;
}

And here’s the compiled CSS:

1
2
3
4
5
6
7
8
9
10
11
body {
  background-color: #282828;
}
h1 {
  color: #28aadc;
}
.container {
  padding: 2em;
}

###Nesting
We can nest CSS selectors. This is both beautiful and dangerous, because it’s easy to get carried away with nesting, and end up with very long declarations. Learn it and master it. Nesting can become your best friend, but can also add load to your stylesheet. Let’s look at a classic example – a basic navigation list. Here’s our SCSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  text-align: center;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 5px 10px;
  }
}

And this it what it looks like when compiled:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  text-align: center;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 5px 10px;
}

###Extend

We can extend styles from other declarations. This is particularly useful when dealing with CSS grids, and you want to name your styles mathematically in your stylesheet, but keep it all good and semantic in your markup. Let’s look an example. Here’s our SCSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// columns
.col-1-3 {
  width: 33.33%;
}
.col-2-3 {
  width: 66.66%;
}
// colours
.blue {
  color: rgb(40,170,220);
}
// structure
.primary-content {
  @extend .col-2-3;
}
.secondary-content {
  @extend .col-2-3;
}
// text
p.highlight {
  font-size: 3em;
  @extend .blue;
}

And here’s the compiled CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.col-1-3, .secondary-content {
 width: 33.33%;
}
.col-2-3, .primary-content {
 width: 66.66%;
}
.blue, p.highlight {
 color: #28aadc;
}
p.highlight {
 font-size: 3em;
}

###Import
We can split our CSS into smaller, more maintainable files, and import them into a master stylesheet. We can underscore these files to let Sass know not to compile them into CSS files. Rather, just drop the code into our master file. For example, if we had 3 separate stylesheets for a reset, grid work, and text styles, we would have _reset.scss, _grid.scss, and _text.scss, and our main style.scss would look like this:

1
2
3
4
5
6
7
8
9
@import 'reset';
@import 'grid';
@import 'text';
body {
}
h1 {
}

###Mixins
Mixins are one of the true beauties of Sass. They allow us to create our own functions and pass in variables. This is particularly useful for properties that need vendor prefixing. I’ll snag the example from the Sass website, because it echoes the usage perfectly. Here’s some SCSS:

1
2
3
4
5
6
7
8
9
10
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box {
  @include border-radius(10px);
}

And here’s our perfectly compiled CSS:

1
2
3
4
5
6
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

###Wrap Up