在SASS实现中重写边界元元素修饰符

这让我困惑了一段时间

我们使用Sass（SCSS）并在lib-Sass上实现类似于BEM的命名约定

例如，我们有：

.description {
  .title {
    color: red;
  }
}

可以有

description--special

来执行以下操作：

.description {
  .title {
    color: red;
  }

  &--special {
    .title {
      color: blue;
    }
  }
}

由于预期用途是：

<div class="description description--special"></div>

当然，至少在lib sass中，这不起作用：

.description {
  .title {
    color: red;
  }

  &.&--special {
    .title {
      color: blue;
    }
  }
}

这也不是：

.description {
  &root: &;

  .title {
    color: red;
  }

  &.#{&root}--special {
    .title {
      color: blue;
    }
  }
}

使用纯边界元语法 HTML:

使用另一种BEM语法和OOCSS 以下是我使用的替代语法：

• 组件名称
• ComponentName.modifierName
• 组件名称子代名称
• ComponentName-DegenantName.modifierName
• ComponentName.isStateOfComponent
• 非bemprefix某物（例如“ob myCssObject”）

下面的代码与您的代码非常接近。HTML:

<div class="Description special">
  <h1 class="ob-title"></h1>
</div>

作为第三个建议，我建议不要用OOCSS污染你的边界元规则。HTML:

<div class="Description special">
  <h1 class="Description-title ob-title"></h1>
</div>

---

NB:您应该考虑停留在BEM方式中，使用组件“代码>标题<代码>，而不是CSS对象<代码> OB标题<代码> .< /P>不要在YouDeX.com外使用BEM。如果您不在yandex中工作-请不要使用它。LibSass的可能副本与Sass不同。它在Sass之后大约有1-2个版本，您正在寻找的功能仅在最新版本中可用。请注意，如果您尊重BEM，您的

.title

应该在

.description

之外，并命名为

.description\u title

@LeBen True，但这正是我们不完全使用BEM的原因。它是BEM+OOCSS而不是smacks-like结构。这里的OOCSS部分是相关的，因为

title

是一个可重用的模式，不能编码到描述中（同样，这里的命名可能不是最好的）。这肯定是答案。如果我想在没有元素的情况下这样做怎么办？看看你的第一个例子，我希望颜色在块上（

description

），我想给块添加一个修改器来改变颜色？@Botis然后它是一个修改器，就像

.description--special

。

.description {
  &__title {
    color: red;
  }

  &--special &__title {
    color: blue;
  }
}

<div class="Description special">
  <h1 class="ob-title"></h1>
</div>

.ob-title {
  font-weight: bold;
}
.Description {
  .ob-title {
    color: red;
  }
  &.special {
    .ob-title {
      color: blue;
    }
  }
}

<div class="Description special">
  <h1 class="Description-title ob-title"></h1>
</div>

.ob-title {
  font-weight: bold;
}
.Description {
  &-title {
    color: red;
  }
  &.special &-title {
    color: blue;
  }
}