Question

我使用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;
    }

  }
}

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

Sass BEM Mixin子组件

1 个答案: