MENU


Parent Selector

You can use & to referece the parent selector.
& should appear independently or as a prefix only.
div {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
  nav & { font-weight: bold; }
}
#main {
  $v: &;
  color: black;
  &-sidebar { border: 1px solid; }
  &:after { content: $v; }
}

div { color: black; } div a { font-weight: bold; } div a:hover { color: red; } nav div { font-weight: bold; } #main { color: black; } #main-sidebar { border: 1px solid; } #main:after { content: #main; }