This is a super useful method. Most developers tend to use SCSS just like CSS but there are tons of possibilities in this extension of CSS.

Yesterday I decided to invest some time in refactoring my stylesheets to take advantage of this power. A common pattern that I developed involved the @extend method.

Use Case

Imagine that you need to display profits and losses. You have two classes for each group which are very similar except for the text color.

@extend allows you to abstract common attributes and focus on what’s unique about each class.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.loss {
  font-size: 1.5em;
  letter-spacing: .1em;
  font-family: "HelveticaNeue-Light";
  color: red;
}

.profit {
  font-size: 1.5em;
  letter-spacing: .1em;
  font-family: "HelveticaNeue-Light";
  color: green;
}

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.metric {
  font-size: 1.5em;
  letter-spacing: .1em;
  font-family: "HelveticaNeue-Light";
}

.loss {
  @extend .metric;
  color: red;
}

.profit {
  @extend .metric;
  color: green;
}

This helps a lot when prototyping UIs. I no longer need to jump around my stylesheet to update properties. I can simply modify the extended class in most cases.

Comments