Skip to main content

Nesting

Hierarchy​

Nesting helps in maintaining clean hierarchy

.box{
  background-color: blue;
  .element{
    background-color: red;
  }
}

Above code is compiled to:

.box{
  background-color: blue;
}
.box .element{
  background-color: red;
}

& Symbol​

Pseudo selectors​

.box{
  background-color: blue;

  &:hover{
    background-color: red;
  }
}

Above code is compiled to:

.box{
  background-color: blue;
}
.box:hover{
  background-color: red;
}

Joined classes​

.box{
  background-color: blue;

  &.heading{
    font-weight: bold;
  }
}

Above code is compiled to:

.box{
  background-color: blue;
}
.box.heading{
  font-weight: bold;
}