Mastering CSS

SASS nesting

Beyond variables and mixins, there's nesting, which on the surface may not seem too powerful but is extremely convenient. Instead of writing descendant selectors, you can nest selectors inside of each other. You can see in the following CSS code that I've actually nested the focus and hover selectors inside of .button:

.button {  &:focus,  &:hover {    background-color: #333;    color: #fff;    transform: scale(1, 1) translate(0, -5px);  }}

This compiles down in to the following:

.button:focus, .button:hover {  background-color: #333;  color: #fff;  transform: scale(1, 1) translate(0, -5px);}

As a rule of thumb, don't nest if you don't have to because the selector gets more specific and weighs more each time you nest. The trick to modular CSS ...