Skip to content

Instantly share code, notes, and snippets.

@troglotit
Created March 31, 2017 16:17
Show Gist options
  • Save troglotit/e930f5350fefcfca37d51c137b5ef871 to your computer and use it in GitHub Desktop.
Save troglotit/e930f5350fefcfca37d51c137b5ef871 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
$bemSeparators: (element: '__', modifier: '--', pseudo: ':') !default
// Return nest-in-state element if block has modifier class.
@function _nestInState($parent)
$parent: str-slice(inspect($parent), 0) // To string.
$modifierAt: str-index($parent, map-get($bemSeparators, 'modifier'))
@if $modifierAt != null
@return #{$parent + ' ' + str-slice($parent, 0, $modifierAt - 1)}
@else
$modifierAt: str-index($parent, map-get($bemSeparators, 'pseudo'))
@if $modifierAt != null
@return #{$parent + ' ' + str-slice($parent, 0, $modifierAt - 1)}
@return $parent
// Generate prefixes for block(s) or element(s).
@function bemify($items, $type)
$output: ()
@each $parent in &
@each $item in $items
@if $type == 'element'
$parent: _nestInState($parent)
$output: append($output, #{$parent + map-get($bemSeparators, $type) + $item}, comma)
@return $output
=e($elements)
@at-root #{bemify($elements, 'element')}
@content
=m($modifiers)
@at-root #{bemify($modifiers, 'modifier')}
@content
=pseudo($pseudos)
@at-root #{bemify($pseudos, 'pseudo')}
@content
.red
background: red
.Block
color: red
+e(element1)
color: green
+m(elementModifier1)
color: blue
+m(blockModifier1)
color: red
+e(element)
color: green
+m(elementModifier)
@extend .red // Stylus can't do this without ugly prefix :)
color: blue
+pseudo(hover)
color: white
+e(fancy)
color: fancy
.red, .Block--blockModifier1 .Block__element--elementModifier {
background: red;
}
.Block {
color: red;
}
.Block__element1 {
color: green;
}
.Block__element1--elementModifier1 {
color: blue;
}
.Block--blockModifier1 {
color: red;
}
.Block--blockModifier1 .Block__element {
color: green;
}
.Block--blockModifier1 .Block__element--elementModifier {
color: blue;
}
.Block:hover {
color: white;
}
.Block:hover .Block__fancy {
color: fancy;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment