# Nesting

While HTML has a clear nested hierarchy (visualized in your editor by the increasing indentation when you move deeper in the DOM of your page), CSS has not!
Using Sass, you can
- nest your CSS selectors in a way that follows the same visual hierarchy of your HTML
- write one style rule inside another

# Basic Nesting

Suppose we want the p tag in the footer to have a different (top and bottom) padding, without affecting the other paragraphs of our page
- Using CSS, we would write footer p { padding: 1rem 0; }
- Using the Sass nesting technique, this style rule can be inserted within the style rule for footer

REMARKS

Obviously, you are not restricted to 2 levels of nesting. Suppose you would want to style the a tag(s) within the paragraphs of the footer (without affecting the other a tags), you could write something like

footer {
  ...
  p {
    ... 
    a {
      ...
    }
  }
}

1
2
3
4
5
6
7
8
9

Besides the descendant (space) combinator, you can also use nesting with the other combinator selectors:

div {
  ... 
  > p {
    ...
  }
}

1
2
3
4
5
6
7

div {
  ... 
  + p {
    ...
  }
}

1
2
3
4
5
6
7

div {
  ... 
  ~ p {
    ...
  }
}

1
2
3
4
5
6
7

# Advanced nesting with the parent selector

The parent selector & is a Sass selector that is used in nested selectors to refer to the outer (parent) element
This selector is often used in combination with nesting to style the different link states:

READING TIP

Sass documentation: Nesting (opens new window)

# Example 1C

    
<main>
    <h1>Sass</h1>
    <p><a href="https://sass-lang.com/">Sass</a> (short for Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or
        compiled into Cascading Style Sheets (CSS).</p>
    <p>Sass exists in 2 syntax variants:</p>
    <ul>
        <li>The original syntax, called "the indented syntax," uses indentation to separate
            code blocks and newline characters to separate rules.
        </li>
        <li>The newer syntax, "SCSS" (Sassy CSS), uses block
            formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a
            block.
        </li>
    </ul>
    <p>The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.</p>
</main>
<footer>
    <p>Based on the information found on <a
            href="https://en.wikipedia.org/wiki/Sass_(stylesheet_language)">Wikipedia</a>, The Free Encyclopedia.
        Retrieved January 19, 2021.
    </p>
</footer>

    
@use "sass:color";

$sasscolor: #cf649a;
$fontstack: Verdana, sans-serif;
$fontsize: 14px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: $fontsize;
}

body {
  font-family: $fontstack;
  line-height: 1.5;
}

main, footer {
  padding: 0 1rem;
}

h1 {
  color: $sasscolor;
  background-color: inherit;
}

h1, p, ul {
  margin-bottom: 1rem;
}

li {
  margin-left: 2rem;
}


footer {
  color: inherit;
  background-color: color.scale(color.invert($sasscolor), $lightness:75%);

  p {
    padding: 1rem 0;
  }
}


a {
  font-weight: bold;
  text-decoration: none;
  color: color.scale($sasscolor, $lightness:-50%);
  background-color: inherit;

  &:focus {
    outline: 2px solid $sasscolor;
  }

  &:hover {
    text-decoration: underline;
  }
}