如何在SASS中使用嵌套元素构造BEM修改器

SASS + BEM在大多数时候都是天堂般的匹配,但是我的共同努力是理解如何在使用SASS父选择器的元素上最好地定义BEM修饰符来影响它的子元素.

我使用BEM样式语法在SASS中定义了以下组件:

.card {
  background-color: #FFF;

  &__value {
    font-size: 2em;
    color: #000;
  }
}

这很有效,因为SASS的父选择器.它保持相关代码的组织和自包含.

但是当我需要添加一个使用父选择器改变子元素的修饰符时,这个想法很快就会崩溃:

.card {
  padding: 2em;

  &__value {
    font-size: 1.5em;
    color: #000;
  }

  &--big {
    padding: 2.5em;

    &__value {          // Is this going to work?
      font-size: 3em;
    }
  }
}

不.它产生了这个:

.card {
  padding: 2em;
}
.card__value {
  font-size: 1.5em;
  color: #000;
}
.card--big {
  padding: 2.5em;
}
.card--big__value {  // Wrong
  font-size: 3em;
}

以某种方式获取此选择器会更有意义:

.card--big .card__value {
  font-size: 3em;
}

这样做的原因是,您可以简单地将修饰符添加到顶级元素,并使其影响任何或所有子元素.

我尝试了几种方法:

使用两种结构

.card {
  padding: 2em;

  &__value {
    font-size: 1.5em;
    color: #000;
  }
}

.card--big {
  padding: 2.5em;

  &__value {
    font-size: 3em;
  }
}

这很有效(特别是在这个简化的演示中)但是在一个带有许多修饰符的更复杂的组件集中,这可能是维护和保持bug的潜在痛苦.此外,如果可能的话,继续使用SASS父选择器会很好.

为元素使用变量

.card {
  $component: &;  // Set the variable here

  padding: 2em;

  &__value {
    font-size: 1.5em;
    color: #000;
  }

  &--big {
    padding: 2.5em;

    #{$component}__value {  // Use it here
      font-size: 3em;
    }
  }
}

这很好用.但是将元素定义为变量似乎有点愚蠢.也许这是唯一真正做到这一点的方法......我不确定.有没有更好的选择如何构建这个？

为什么不这样做呢？

.card {
  padding: 2em;

  &__value {
    font-size: 1.5em;
    color: #000;
  }

  &--big {
    padding: 2.5em;
  }

  &--big &__value {  
    font-size: 3em;
  }
}