Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Sass Nesting | Preprocessors
Advanced CSS Techniques
course content

Course Content

Advanced CSS Techniques

Advanced CSS Techniques

1. Introduction
2. Item Positioning
3. Transitions
4. Animations
5. Transformations
6. Adaptive/responsive websites and apps
7. Preprocessors

bookSass Nesting

The next powerful feature is nesting. It allows us to nest one selector within another to create more organized and readable code. We can group styles and reduce the code we need to write.

Let's imagine that we need to create the website navigation.

The html for this navigation will look the following:

Considering that besides the navigation, we use the same html tags (ul, li, a) multiple times throughout the project. To add some styles exactly to these elements, we need to use nesting rules in css. So, css can look as follows:

Now, let's see how sass can makes our lives easier. We will group all these styles in one block. The code is rewritten into:

It's like we're nesting the child's style block in its parent block. Pay attention that the & symbol in the &:hover selector is used to reference the parent selector, in this case, a. This is a shorthand way of writing a:hover and makes it easier to write nested selectors without repeating the parent selector multiple times.

What is the benefit of using sass nesting?

What is the benefit of using sass nesting?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 7. Chapter 5
some-alt