Stylus BEM mixins

mixins.styl

// Mixins.styl
has($name)
  /&__{$name}
    {block}

variant($name)
  /&--{$name}
    {block}
    
    
// Alert.styl
.Alert
  background: lighten(gray, 80%)
  padding: 15px
      
  +has(close-button)
      right: 10px
      position: absolute
      cursor: pointer

  +variant(Success)
    util-color(green)
    
    
// index.html
  <div class="Alert Alert--Success">
    <p>Lorem ipsum...</p>
    <span class="Alert__close-button" @click="close">
      x
    </span>
  </div>