CSS Extension — SASS: Fundamentals of Operations

• Nesting
• Suffixes
• Combining

At the initial stages, it's convenient to look at preprocessors in terms of extending the standard features of CSS. These features help you better structure your code in the file and reduce class repetition.

Nesting

The first feature with which you can extend CSS is nesting rules. It allows you to write linked CSS code in one place, inside a single selector. This approach makes it easier to understand CSS because now we'll always be able to see how elements are connected, and everything will all be in one place:

.header {
  width: 100%;
  height: 70px;
  background: #fff;

  .logo {
    width: 70px;
    height: 70px;
  }

  .company-name {
    font: bold 12px/24px 'Roboto';
  }
}

You can see that the .logo and .company-name selectors are inside the .header selector. What does this mean? What does this code compile into? The SASS preprocessor will take the .header selector rules and leave them unchanged, but the .logo and .company-name will be substituted by the parent selector, the .header. The output is the following CSS:

.header {
  width: 100%;
  height: 70px;
  background: #fff;
}

.header .logo {
  width: 70px;
  height: 70px;
}

.header .company-name {
  font: bold 12px/24px 'Roboto';
}

This approach helps with large layouts. It means you don't repeat the parent selector and type it.

But be careful. Using selectors increases specificity because styles for the .company-name class will now only run if there is a parent block with the .header class. It often interferes with the CSS, so you should always consider whether such nesting is necessary.

The same applies to nesting levels. SASS won't stop you from nesting selectors into each other until the cows come home. But in the end, not only will it make the rules highly specific, but it will also bloat them to the point where they can't be understood.

Suffixes

One other super useful feature is — suffixes. Let's take a simple example; we'll write a small CSS file with a flex module. Styles can be labeled as follows:

.flex {
  display: flex;
}

.flex.justify-content-between {
  justify-content: space-between;
}

.flex.align-items-center {
  align-items: center;
}

These styles allow us to set the display, justify-content, and align-items properties. The last two properties depend on the display property. If the flex class isn't specified, the axis alignment won't work.

In this form, there doesn't seem to be a problem. But if you create such styles for each class, the number of rules grows. They'll most likely be scattered all over the file, which is inconvenient when editing later.

SASS allows you to put such properties inside each other. Since flex is the main class here, we can place all the others within it. To check if there are two classes, we use the suffix &:

.flex {
  display: flex;

  &.justify-content-between {
    justify-content: space-between;
  }

  &.align-items-center {
    align-items: center;
  }
}

Another convenient example is the presence of pseudoclasses, such as :hover. Here we see SCSS:

.link {
  color: #fff;

  &:hover {
    color: #ccc;
    font-weight: bold;
  }
}

And CSS:

.link {
  color: #fff;
}

.link:hover {
  color: #ccc;
  font-weight: bold;
}

Combining

You can freely combine both approaches to write neat CSS so you won't get mixed up. Imagine the following situation: we want to create a block with a link to an image inside it. The picture is hidden by default. When hovering over this link, it should appear, and the text in the link should turn bold. To make it more convincing, we have only one class framing the link. Let's solve this problem with plain CSS:

.link-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-wrapper a {
  color: blue;
  text-decoration: none;
  border-bottom: 1px solid #f9f9f9;
}

.link-wrapper a img {
  display: none;
}

.link-wrapper a:hover {
  font-weight: bold;
  color: red;
  border-bottom: 1px solid white;
}

.link-wrapper a:hover img {
  display: block;
  width: 100px;
  height: 20px;
}

Now, imagine a large project with twice as many styles for these classes. It's not a nice picture, considering that styles can be in a different order and even in different places in the code. Preprocessors can help solve this problem. If you use SASS, the styles will look like this:

.link-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;

  a {
    color: blue;
    text-decoration: none;
    border-bottom: 1px solid #f9f9f9;

    img {
      display: none;
    }

    &:hover {
      font-weight: bold;
      color: red;
      border-bottom: 1px solid white;

      img {
        display: block;
        width: 100px;
        height: 20px;
      }
    }
  }
}

We may not have reduced the number of lines in the file, but now all the styles are laid out so that they're easy to work with, and we can avoid having to write parent selectors again. It saves a lot of time and avoids a lot of mistakes.