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;