Last Updated: February 25, 2016
·
1.366K
· caedes

Using @at-root Sass mixin

Menu with active item behavior:

<body class="item1">
  <ul>
    <li class="item1">Item 1</li>
    <li class="item2">Item 2</li>
  </ul>
</body>

Sass Mixin:

=in($name)
 @at-root #{$name} &
   @content

Sass usage:

ul li
  &.item1
    color: purple
    +in('body.item1')
      font-weight: bold
  &.item2
    color: green
    +in('body.item2')
      font-weight: bold

Enjoy!