DEV Community

Cover image for Sass: More about Nesting 📚
Akram A. Abdelbasir
Akram A. Abdelbasir

Posted on • Updated on


Sass: More about Nesting 📚

We learnt how to nest Scss rules in the last post. Today, we'll go into more depth regarding nesting.

In this post, we will cover:-

  1. Parent Selector and pseudo-classes
  2. Grouping and Nesting CSS Selectors
  3. Selector Nest Combinators

Each point will be discussed in depth.

1. Parent Selector and pseudo-classes

Official SASS document states that

The parent selector, & , is a special selector invented by Sass that's used in nested selectors to refer to the outer selector

To further understand, consider the example below.

Example on Parent Selector

& here works as a reference to the outer selector which is .main .alert

It may be puzzling to you how such a selector may be helpful, right? Parent selector is most commonly used in:

1.1 _Suffix classes context.

Many frameworks, including Bootstrap, have this pattern.

Example of a parent selector-based suffix class

1.2 Pseudo classes also utilize a parent selector.

Example on using parent selector with pseudo classes

1.3 also & can be used as an argument inside pseudo-selectors functions:

Example 2 on using parent selector with pseudo classes

2. Grouping and Nesting CSS Selectors

We use a comma as a separator when there are many selectors in a list.

Example on nesting and selector list

3. Selector Nest Combinators (>, +, ~, space)

selector combinators can be placed in many places as shown below:

where to write selector combinators?

Need to read more about selector-nest-combinators? selector-nest-combinators

I almost covered everything I know about SCSS nesting; nevertheless, in the following post, we'll talk about a new subject called placeholder selector.

Top comments (0)