2

これはしばらくの間私を困惑させてきました。

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>

誰かがこれを行うのに十分エレガントな方法を提案できますか?

現在の「最良の」提案は、これを行うことです:

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

もちろん、少なくともlib-sassでは、これは機能しません。

.description {
  .title {
    color: red;
  }

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

これもしません:

.description {
  &root: &;

  .title {
    color: red;
  }

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

1 に答える 1