Learn SCSS (Sass) Part 2

In part 1 I highlighted some of the basic features of Sass. Check out the first part here:

Learn the SCSS (Sass) Basics in 5 Minutes

In this article I will go over the remaining features that make Sass great. Those are Extend/Inheritance & Operators.

Extend/Inheritance

Sass has a few ways of making it so we don’t have to repeat ourselves with our code. One of the ways of doing this is to create a placeholder that can be extended.

You can use the “%” symbol to create a class that you only want to extend.

Extending means giving a css class the attributes of the extended class. This way we don’t have to write the same code over and over.

Here is a code snippet from the docs:

/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

To extend, as it is shown, all you have to do is use “@extend” with the “%” symbol and class name. This will ensure that the success, error, and warning class all have the attributes from the “message-shared” class.

Operators

Prior to Sass, you couldn’t perform any math in a CSS file. Operators in Sass change this by giving you the ability to do math with your attributes.

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

This is a great feature and saves you from writing Javascript to take care of things like this.

Conclusion

And that’s really it. Stay out of trouble my friends.