Register to get access to free programming courses with interactive exercises

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.


Hexlet Experts

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

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.