sass Nesting properties


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;
}