Post

๐Ÿ“š 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.

This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.