8

次のコード スニペットをリファクタリングしてdouble 修飾子宣言を取り除くことはできますか?

.block {
  &__element {
    rule: value;
  }
  &--modifier {
    rule: value;
  }
  &--modifier & {
    &__element {
      rule: value;
    }
  }
}

必要な出力:

.block {
   property: value;
}
.block--modifier {
  property: value;
}
.block--modifier .block__element {
  property: value;
}
4

4 に答える 4

13

修飾子内の要素のネストは既知の問題です。多くの回避策があります。

可変式

ブロック要素を変数に格納します。

モディファイア内で要素を作成するときに補間して使用します。

.block {
  $block: &;

  &__element {
    property: value;
  }

  &--modifier {
    property: value;
    #{$block}__element {
      property: value;
    }
  }
}

以下の出力を参照してください。

機能方法

1. ブロック要素を返す関数を作成します。

親セレクターを取得し、前の単語--(ブロック) をカットします。ハックに見えますが、これが最も簡単な方法です。

@function block() {
  $selector: str-slice(inspect(&), 2, -2);
  $index: str-index($selector, '--') - 1;
  @return str-slice($selector, 0, $index);
}

2.補間された関数を使用します。

ブロックの名前が返されるので、繰り返す必要はありません。

.block {
  property: value;

   &--modifier {
     property: value;
     #{block()}__element {
       property: value;
     }
   }
}

以下の出力を参照してください。

どちらの方法でも次のように出力されます。

.block {
  property: value;
}

.block--modifier {
  property: value;
}

.block--modifier .block__element {
  property: value;
}
于 2015-08-20T01:40:23.633 に答える
1

ブロックをターゲットにする&--modifierのではなく、ブロックのクラス名を使用して、このようにセレクター内にブロックを配置できます。&

.block {
  &__element {
    rule: value;
  }
  &--modifier {
    rule: value;

    .block {
      &__element {
        rule: value;
      }
    }
  }
}

ただし、これは最適な BEM ソリューションではない可能性があります。ネストされたブロックの名前を、包含ブロックの要素として変更する.block__another-elementか、完全に新しいブロックを作成することを検討する必要があります。

于 2015-08-18T09:03:24.373 に答える
1

誰かがあまり使用しない場合、これはあなたを助けます!

@block:.parent;
@{block}{
    backgroung:red;
    &--modifier{
        backgroung:blue;
    }
    &__child{
        font-size:20px;
        @{block}--modifier & {
           font-size:40px;
        }
    }
}
于 2018-08-14T15:54:15.963 に答える