-1

sass で bem 構文を使用しようとしていますが、問題が発生します。

コードは次のとおりです。

<button name="button" class="button button__call--full">Call</button>



    $color__primary : #23ae4b;
    $color__secondary : #1976d3;

    ////////////////////
    // Placeholder   //
    ////////////////////

    %button {
      background: #45beff;
      border: none;
      padding: 5px 8px;
      font-size: 16px;
      border-radius:3px;
      color:#fff;

      &:hover {
        opacity: 0.75;
      }
    }

    ////////////////////
    // Styling        //
    ////////////////////

    .button {
      @extend  %button;

      &__call {

        box-shadow:
        0 0.150em 1px hsl(100, 80%, 30%), 0 0.5em 5px rgba(0, 0, 0, 0.2);
        padding:5px 30px;
        position: relative;

        &--full{
          background: url("../../static/images/arrow.png") no-repeat 96% 52% $color__secondary;
        }


      }

     }

私のcssがコンパイルされると、私はこれを持っています:

.button__call {
    box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    padding: 5px 30px;
    position: relative; }
.button__call--full {
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3; }

そして、私はこれが欲しい:

    .button__call {
    box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    padding: 5px 30px;
    position: relative; }
.button__call--full {
            box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    padding: 5px 30px;
    position: relative;
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3; }

実際、修飾子がある場合、ブロック ボタンから拡張されます。すべてのスタイル、修飾子、および要素が必要です。私はこれをしたくありません:

<button name="button" class="button  button__call button__call--full">Call</button>
4

2 に答える 2

0

2 番目の出力を模倣するには、次の宣言を使用する必要があります。

.button {
    @extend  %button;

    &__call,
    &__call--full {
        box-shadow:
        0 0.150em 1px hsl(100, 80%, 30%), 0 0.5em 5px rgba(0, 0, 0, 0.2);
        padding:5px 30px;
        position: relative;
    }

    &__call--full {
        background: url("../../static/images/arrow.png") no-repeat 96% 52% $color__secondary;
    }
}

を使用するたびに&、ネストされたセレクター フラグメントのチェーンを取得し、見つかったビットを使用してまったく新しいトップ レベルのセレクターを構築します。次に、その sass セレクターにあるすべてのプロパティを css セレクターに追加します。

しかし、これは実際には BEM の正しい使い方ではありません。スタイルを不必要に複製したため、&. あなたがリストしたsassは実際には正しく、モジュール、要素、要素への修飾子がネストされた順序で続き、それぞれが&本来の動作をします。

すべてのスタイル (デフォルトおよび変更済み) を収集するには、親クラスと修飾子クラスを使用する必要があります。このような：

<div class='button__call button__call--full'></div>

このようにして、構築したsassは、BEMで構築する場合により正確になり、要素で機能します

于 2015-06-30T12:00:59.067 に答える
-1

お役に立てず申し訳ありません。もちろん、BEM 手法で Sass を使用することもできます。&__ と &-- を使用すると、コードの可読性が失われることを指摘したかっただけです。

あなたの BEM の理解度はわかりませんが、次のようなマークアップとクラスを作成する必要があります。

<button name="button" class="button button--full">Call</button>

と

.button {
  box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2);
  padding: 5px 30px;
  position: relative;
}
  .button--full {
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3;
  }

うまくいけば、それが役に立ちました。

于 2015-06-28T17:45:43.303 に答える