Nesting in CSS without a preprocessor
Categories
Date
2022-01-02
I have been using CSS for a long time, as far i can remember i needed to use a preprocessor to nest my styles in CSS or using variables, but now with new CSS features we can do that without a preprocessor, let's see how.
## Nesting in CSS
we are used to nest our styles in a preprocessor like SASS or LESS, but now we can do that in CSS as we are used to but with a little different syntax.
```Scss
header {
.heading {
color: red;
}
}
```
this compiles to following CSS code:
```css
header .heading {
color: red;
}
```
but now we can do that in CSS with the following syntax:
```css
header {
& .heading {
color: red;
}
}
```
we are using & sign to refer to the child element of the parent element and it will compile to the same CSS code as the SASS code.
we can even nesting more than one child element like this:
```css
header {
& .heading {
color: red;
& .sub-heading {
color: blue;
}
}
}
```