Tutorial by Examples

Whenever you declare a new rule inside another rule it is called nesting. With basic nesting, as shown below, the nested selector will be compiled as a new CSS selector with all its parents prepended, separated by a space. // SCSS .parent { margin: 1rem; .child { float: left; } ...

Nesting is a very powerful feature, but should be used with caution. It can happen quite easily and quickly, that you start nesting and carry on including all children in a nest, of a nest, of a nest. Let me demonstrate: // SCSS header { // [css-rules] .holder { // [css-rules] ...

Nesting is probably most often used to create more specific selectors, but it can also be used simply for code organization. Using the @at-root directive, you can ‘jump out’ of where you nest it in your Sass, bringing you back at the top level. Doing this allows you to keep styles grouped without cr...

Nesting is great for keeping related selectors together to make it easier for future developers to understand your code. The parent selector, represented by an ampersand ("&") can help do that in more complex situations. There are several ways its can be used. Create a new selector th...

Some CSS properties belong to a namespace, for instance border-right belongs to the border namespace. To write less, we can utilize property nesting, and skip these prefixes, even on multiple levels. If we needed to create a border on the right and left of a class named .borders we could write this...