Things have change a lot since the last few years. Here are my quick notes on using CSS3.

CSS can now be nested using the > character.

CSS2 CSS3
.outside .inside {
 # Styles A
}
.outside .inside img {
 # Styles B
}
.outside .inside p {
 # Styles C
}
.outside {
  > .inside {
    # Styles A
    > img {
      # Styles B
    }
    > p {
      # Styles C
    }
  }
}

The nesting must be immediate. It will not be inherited if the path does not match completely.

Rules can be isolated for certain viewports.


Less[edit | edit source]

Rules can be inherited with &:extend()

img {
  &:extend(.img-responsive);
}


See Also[edit | edit source]