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