It is useful to use a nested rule’s parent selector in other ways than the default. For instance, you might want to have special styles for when that selector is hovered over. In these cases, you can explicitly specify where the parent selector should be inserted using the & character.
This technique will work for any pseudo class such as :after, :before, :active, and so on.
SCSS
a {
color: red;
text-decoration: none;
&:hover {
CSS nesting. Whereas CSS requires that you duplicate the series of selectors for nesting, Sass allows selectors to be truly nested within one another. As selectors and rules are nested within each other, the inner rule only applies within the outer rule’s selector.
SCSS requires the use of curly-brackets {} to separate nested selectors and semi-colons ; to separate rules.
It should be noted that with SCSS tabbing is not necessary as the curly-brackets {} and semi-colons ; do all the work. But it is highly recommended for readability.
.your_new_class {
background: orange;
p {