CSS Extension — SASS: Fundamentals of Operations

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. This 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 clearly 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 and 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, and it means you don't have to repeat the parent selector. This is super convenient and means you won't forget to type the parent selector.

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. This often interferes with the normal use of CSS, so you should always be aware of whether such nesting is necessary.

The same applies to nesting levels. SASS won't stop you nesting selectors into each other until the cows come home. But in the end, not only will it make the rules highly specific, 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 only 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, all the others can be placed within it. To check if there are exactly 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 of how suffixes are used is the presence of pseudoclasses, such as :hover.

SCSS

.link {
  color: #fff;

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

CSS

.link {
  color: #fff;
}

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

Combining

You can freely combine both approaches to write neat CSS that you won't get mixed up in. Imagine the following situation: we need to create a block with a link to an image inside it. The picture is hidden by default. When hovering over this link, the picture 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 that this is a large project, with twice as many styles for these classes. It's not a very nice picture. Especially considering that developers don't always follow the logic of what's going on and styles can be in 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.

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“