Css 要匹配MDL结构的边界元生成器mixin

因此，我有以下几个mixin来生成我的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

到

如前所述，这样做的原因是为了匹配MDL。此处可以看到这种格式的示例：

现在，我几乎可以通过更改这一行获得所需的效果：

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

为此：

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

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

但这会改变CSS的输出：

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

为此：

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

.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;
}

---

你可以在这里看到这一切：

这是我用叉子叉你的笔时迅速想到的一件事：

在modf mixin中添加#{$selector}

修改get block函数，使其返回实际的基类。首先，我们将字符串切分到修饰符（-）处，然后检查连接的字符串中是否有多个类。如果不止一个，我们得到第一个

代码笔链接：

---

我不知道它是否完全适合您的需要或涵盖您想做的每一件事，但我希望它能有所帮助。

您是否停下来思考这是否是一个好主意？您在这里编写了这么多代码，以节省自己的一些击键次数。您的问题的任何解决方案都将更加冗长。@cimmanon您好，是的，我有，我想这样做的原因是它停止了您的孩子身上的打字错误，并进行了修改，它保持了CSS的平面和正确的结构，而对于一个应用于有多个我认为BEM结构化课程将变得无价。