sass-bevm-mixins

mixins.scss

$es: '__';
$vs: '--';
$mp: '-';

@function containsVariation($selector) {
    $selector: selectorToString($selector);
    @if str-index($selector, $vs) {
        @return true;
    }
    @return false;
}

@function containsModifier($selector) {
    $selector: selectorToString($selector);
    @if str-index($selector, $vs) {
        @return true;
    }
    @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);
    $start: str-index($selector, $vs) - 1;
    @return str-slice($selector, 0, $start);
}

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

@mixin e($element) {
    $selector: &;
    @if containsVariation($selector) {
        $block: getBlock($selector);
        @at-root {
            #{$selector} {
                #{$block+$es+$element} {
                    @content;
                }
            }
        }
    } @else {
        @at-root {
            #{$selector+$es+$element} {
                @content;
            }
        }
    }
}

@mixin v($variation) {
    $selector: &;
    @if containsModifier($selector) {
        $block: getBlock($selector);
        @at-root {
            #{$selector} {
                #{$block+$vs+$variation} {
                    @content;
                }
            }
        }
    } @else {
        @at-root {
            #{$selector+$vs+$variation} {
                @content;
            }
        }
    }
}

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

@include b(block) { //.block
    background: red;
    
    @include m(modifier) { //.block.-modifier
        font-size: 18px;
    }
        
    @include e(element){ //.block__element
        font-size: 14px;
        
        @include m(modifier) { //.block__element.-modifier
            font-size: 18px;
        }

        @include v(variation) { //.block__element--variation
            font-size: 18px;
            
            @include m(modifier) { //.block__element--variation.-modifier
                font-size: 18px;
            }
        }
    }
    
    @include v(variation) { //.block--variation
        color: blue;

        @include e(element) { //.block--variation .block__element
            background: gray;
            
            @include m(modifier) { //.block--variation .block__element.-modifier
                font-size: 18px;
            }
            
            @include v(variation) { //.block--variation .block__element--variation
                color: blue;
                
              @include m(modifier) { //.block--variation .block__element--variation.-modifier
                  font-size: 18px;
              }
            }
        }
        
        @include m(modifier) { //.block--variation.-modifier
            font-size: 18px;

            @include e(element) { //.block--variation.-modifier .block__element
                background: gray;
                
                @include m(modifier) { //.block--variation.-modifier .block__element.-modifier
                    font-size: 18px;
                }
                
                @include v(variation) { //.block--variation.-modifier .block__element--variation
                    color: blue;
                    
                  @include m(modifier) { //.block--variation.-modifier .block__element--variation.-modifier
                      font-size: 18px;
                  }
                }
            }
        }
    }
}

@include b(block) { //.block
    background: red;
    
    @include m(modifier) { //.block--variation.-modifier .block__element--variation.-modifier
        font-size: 18px;
        
        @include v(variation) { //.block--variation.-modifier .block__element--variation
            color: blue;
        }
    }
}