Example
Some CSS properties belong to a namespace, for instance border-right belongs to the border namespace. To write less, we can utilize property nesting, and skip these prefixes, even on multiple levels.
If we needed to create a border on the right and left of a class named .borders we could write this:
//SCSS
.borders {
border: 2px dashed blue;
border: {
left: 1px solid black;
right: 1px solid red;
}
}
// CSS output
.borders {
border: 2px dashed blue;
border-left: 1px solid black;
border-right: 1px solid red;
}
This saves us having to write border-right and border-left, however we are still writing repetitive code with the lines 1px solid black and 1px solid red. We can write still less repetitive CSS with the folowing:
// SCSS
.borders {
border: 2px dashed blue {
left: 1px solid black;
right: {
color: red;
}
}
}
// CSS output
.borders {
border: 2px dashed blue;
border-left: 1px solid black;
border-right-color: red;
}
