Sass BEM Mixin 子组件答案

【问题标题】：Sass BEM Mixin Sub ComponentsSass BEM Mixin 子组件
【发布时间】：2014-02-24 19:53:54
【问题描述】：

我正在使用 Sass 3.3“.scss 语法”通过以下 mixin 实现 BEM 嵌套：

@mixin e($name) {
  @at-root #{&}__#{$name} {
    @content;
  }
}

我正在像这样使用 mixin：

.header {
  background:red;

  @include e(logo) {
    background:green;

    @include e(inner) {
      background:blue;
    }
  }
}

这会输出以下内容：

.header {
  background:red;
}

  .header__logo {
    background:green;
  }

    .header__logo__inner {
      background:blue;
    }

我想要的输出是：

.header {
  background:red;
}

  .header__logo {
    background:green;
  }

    .header__logo-inner {
      background:blue;
    }

注意__ 如何被inner 元素上的- 替换。

我知道我可以通过添加另一个 mixin 来做到这一点，但我希望 e mixin 自动处理它。我的e mixin 的伪代码类似于：

@mixin e($name) {
  @if 'sub-component' {

    @at-root #{&}__#{$name} {
      @content;
    }

  } @else if 'sub-sub-component' {

    @at-root #{&}-#{$name} {
      @content;
    }

  }
}

【问题讨论】：

标签： css sass

【解决方案1】：

感谢Hugo Giraudel 提出我现在的 mixin 的想法：

@mixin e($name, $sub-element: false) {
  @if $sub-element == false {

    @at-root #{&}__#{$name} {
      @content;
    }

  } @else if $sub-element == true {

    @at-root #{&}-#{$name} {
      @content;
    }

  }
}

用法是这样的：

.header {
  background:red;

  @include e(logo) {
    background:green;

    @include e(inner, true) {
      background:blue;
    }
  }
}

【讨论】：