Sass nested CSS selectors are similar to HTML’s nesting rules.
As follows, we nest the style of a navigation bar: In the instance, the selectors for Convert the above code to CSS code, as follows: Many CSS attributes have the same prefix, for example: In Sass, we can write them using nested attributes: Convert the above code to CSS code, as follows: 13.4.1. Sass Code: ¶
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
ul , li , and a are all nested within the nav selectors. 13.4.2. Css Code: ¶
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Sass nesting properties ¶
font-family , font-size and font-weight text-align , text-transform and text-overflow . 13.4.3.
Sass code: ¶ font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
13.4.4. Css Code: ¶
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;