Question

所以我有以下mixins来生成我的BEM类：

$es: '__';
$ms: '--';

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

@function contains-modifier($selector) {
    $selector: to-string($selector);
    @if str-index($selector, $ms) {
        @return true;
    } @else {
        @return false;
    }
}

@function get-block($selector) {
    $selector: to-string($selector);
    $modifier-start: str-index($selector, $ms) - 1;
    @return str-slice($selector, 0, $modifier-start);
}

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

@mixin elem($element) {
    $selector: &;
    @if contains-modifier($selector) {
        $block: get-block($selector);
        @at-root {
            #{$selector} {
                #{$block+$es+$element} {
                    @content;
                }
            }
        }
    } @else {
        @at-root {
            #{$selector+$es+$element} {
                @content;
            }
        }
    }
}

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

@include blck(block) {
    background: red;
    @include elem(child){
        color: blue;
    };
    @include modf(modifier) {
        background: blue;
        @include elem(child) {
            color: red;
        }
    }
}

现在这实际上生成了完美的BEM样式代码但是我想要匹配MDL代码结构，这意味着我想要更具体地嵌套我的修饰符形成这个

.block
.block--modifer

到

.bock.block--modifier

之前说过的原因是为了匹配MDL，可以在此处看到此格式的示例：http://yaws.hyber.org/stream.yaws

现在我可以通过更改此行来获得所需的效果：

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

对此：

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

但是这改变了CSS输出：

.block {
  background: red;
}
.block__child {
  color: blue;
}
.block--modifier {
  background: blue;
}
.block--modifier .block__child {
  color: red;
}

对此：

.block {
  background: red;
}
.block__child {
  color: blue;
}
.block.block--modifier {
  background: blue;
}
.block.block--modifier .block.block__child {
  color: red;
}

现在您可以看到这样可以修复修饰符特异性但会破坏修饰符子项。

所需的输出如下：

.block.block--modifier .block__child {
  color: red;
}

您可以在此处查看所有内容：https://github.com/google/material-design-lite/blob/master/src/card/_card.scss

Answer 1

我想通过你的笔来解决这个问题：

在modf mixin中添加＃{$ selector}。
修改get-block函数，使其返回实际的基类。首先，我们将字符串切片到修饰符（ - ）的点，然后检查连接字符串中是否有多个类。如果有多个，我们会得到第一个。

来自codepen的链接：http://codepen.io/MKallivokas/pen/bpBYEg

$es: '__'; // Element
$ms: '--'; // Modifier
$ns: 'ns'; // Name space (Set to null if un-wanted)

@if($ns) {
  $ns: $ns + '-';
}

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

@function contains-modifier($selector) {
    $selector: to-string($selector);
    @if str-index($selector, $ms) {
        @return true;
    } @else {
        @return false;
    }
}

@function get-block($selector) {
    // do what get-block was doing in order to
    // remove the modifier's part from the string
    $selector: to-string($selector);
    $modifier-start: str-index($selector, $ms) - 1;
    $selector: str-slice($selector, 0, $modifier-start);
    // remove the first dot
    $selector: str-slice($selector, 2, str-length($selector));
    // check if there is another dot
    $modifier-start: str-index($selector, '.') - 1;
    @if $modifier-start >= 0 {
      // if there's another dot we slice the string up to that point
      $selector: str-slice($selector, 0, $modifier-start);
    }
    // we insert the dot that we removed to the start
    $selector: str-insert($selector, '.', 1);
    @return $selector;
}

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

@mixin elem($element) {
    $selector: &;
    @if contains-modifier($selector) {
        $block: get-block($selector);
        @at-root {
            #{$selector} {
                #{$block+$es+$element} {
                    @content;
                }
            }
        }
    } @else {
        @at-root {
            #{$selector+$es+$element} {
                @content;
            }
        }
    }
}

@mixin modf($modifier) {
  $selector: &;
  @at-root {
    #{$selector}#{$selector+$ms+$modifier} {
      @content;
    }
  }
}

@include blck(block) {
    background: red;
    @include elem(child){
        color: blue;
    };
    @include modf(modifier) {
        background: blue;
        @include elem(child) {
            color: red;
        }
    }
}

我不知道它是否完全符合您的需求，或者涵盖您想要做的每一个案例，但我希望它有所帮助。

BEM生成器mixin想要匹配MDL结构

1 个答案: