Skip to content

Instantly share code, notes, and snippets.

@Pandahisham
Forked from russweas/mixins.styl
Created December 4, 2015 12:16
Show Gist options
  • Select an option

  • Save Pandahisham/254530c738cb1500ea85 to your computer and use it in GitHub Desktop.

Select an option

Save Pandahisham/254530c738cb1500ea85 to your computer and use it in GitHub Desktop.
Stylus BEM mixins
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment