Web Developer

SASS Section 3 – Inheritance

  • selector inheritance:
    • you can define selector properties directly in its parent selector.
  • property inheritance:
    • declare place holder start with ‘%’: such as %shared (place holder means this will be replaced by other context)
    • %shared {background: green}
    • using %shared:.content { @extend %shared }. then will generate: .content { background: green}
    • .content can also has its own property if you set up like this: .content { @extend %shared; font-size: 16px;}