Table of Contents
URL: https://www.progressiverobot.com/sass-nesting-selectors/
Sass allows you to easily nest your selectors and organize your rules hierarchically:
.main {
background-color: antiquewhite;
margin: 0 auto;
img {
max-width: 100%;
transform: rotate(3deg);
}
p:first-child {
font-size: 1.2em;
span {
background-color: burlywood;
padding: 0.2em 0.4em;
}
The above, once compiled to CSS, would yield the following:
.main {
background-color: antiquewhite;
margin: 0 auto;
}
.main img {
max-width: 100%;
transform: rotate(3deg);
}
.main p:first-child {
font-size: 1.2em;
}
.main p:first-child span {
background-color: burlywood;
padding: 0.2em 0.4em;
}
Properties in the same namespace
You can also nest properties that are in the same namespace. For example, background properties can be nested like this. Notice the use of a colon after the <^>background<^> keyword in the example:
.main {
margin: 0 auto;
This would yield the following CSS:
.main {
margin: 0 auto;
background-color: antiquewhite;
background-image: url(images/gator.svg);
background-repeat: repeat-x;
background-size: 36px 48px;
}
👉 Over-nesting can create messy CSS, so keep it at a maximum of just a few levels deep.
