Skip to content

Instantly share code, notes, and snippets.

@mmintel

mmintel/gist:045ffce76b00b327bfc0

Last active October 12, 2020 10:34
Show Gist options
  • Save mmintel/045ffce76b00b327bfc0 to your computer and use it in GitHub Desktop.
Save mmintel/045ffce76b00b327bfc0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mmintel revised this gist Aug 24, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -30,8 +30,8 @@ $modifierSeparator: '--';

    @mixin e($element) {
    $selector: &;
    $block: getBlock($selector);
    @if containsModifier($selector) {
    $block: getBlock($selector);
    @at-root {
    #{$selector} {
    #{$block+$elementSeparator+$element} {
  2. mmintel revised this gist Aug 20, 2014. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion gistfile1.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -30,10 +30,11 @@ $modifierSeparator: '--';

    @mixin e($element) {
    $selector: &;
    $block: getBlock($selector);
    @if containsModifier($selector) {
    @at-root {
    #{$selector} {
    #{getBlock($selector)+$elementSeparator+$element} {
    #{$block+$elementSeparator+$element} {
    @content;
    }
    }
  3. mmintel revised this gist Aug 20, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion gistfile1.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,6 @@ $modifierSeparator: '--';

    @mixin e($element) {
    $selector: &;
    @debug $selector;
    @if containsModifier($selector) {
    @at-root {
    #{$selector} {
  4. mmintel renamed this gist Aug 20, 2014. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.scss
    View file
    File renamed without changes.
  5. mmintel created this gist Aug 20, 2014.
    75 changes: 75 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    $elementSeparator: '__';
    $modifierSeparator: '--';

    @function containsModifier($selector) {
    $selector: selectorToString($selector);
    @if str-index($selector, $modifierSeparator) {
    @return true;
    } @else {
    @return false;
    }
    }

    @function selectorToString($selector) {
    $selector: inspect($selector); //cast to string
    $selector: str-slice($selector, 2, -2); //remove brackets
    @return $selector;
    }

    @function getBlock($selector) {
    $selector: selectorToString($selector);
    $modifierStart: str-index($selector, $modifierSeparator) - 1;
    @return str-slice($selector, 0, $modifierStart);
    }

    @mixin b($block) {
    .#{$block} {
    @content;
    }
    }

    @mixin e($element) {
    $selector: &;
    @debug $selector;
    @if containsModifier($selector) {
    @at-root {
    #{$selector} {
    #{getBlock($selector)+$elementSeparator+$element} {
    @content;
    }
    }
    }
    } @else {
    @at-root {
    #{$selector+$elementSeparator+$element} {
    @content;
    }
    }
    }
    }

    @mixin m($modifier) {
    @at-root {
    #{&}#{$modifierSeparator+$modifier} {
    @content;
    }
    }
    }

    @include b(test) {
    background: red;
    @include e(element){
    font-size: 14px;

    @include m(big) {
    font-size: 18px;
    }
    };
    @include m(modifier) {
    color: blue;

    @include e(subelement) {
    background: gray;
    }
    }
    }