0

scss セレクターの重複を削除しようとしています。

.container {
  .operation {
    color: green;
  }
  .row.is-active &,
  .row:hover & {
    .operation {
      color: inherit;
    }
  }
}

以下のように書き換えてみました。

.container {
  .operation {
    color: green;
  }
  .row & {
    &.is-active, &:hover {
      .operation {
        color: inherit;
      }
    }
  }
}

ただし、これにより、代わりにに.is-active適用されます.container.row

アンパサンドを使用するときに構文上の親をターゲットにするにはどうすればよいですか?

4

1 に答える 1

0

最初に誤解していたので、もう一度質問に答えるのに時間がかかりました。残念ながら、現時点で SASS でこれを行う方法はまったくありません。より高度なSASS 関数を使用してセレクターと文字列を操作しようとしても、それは不可能です。

いくつかの良いニュースがあります

Stylusを使用して行うことができます。codepen で実例を作成しました。

  // Stylus - not SASS
  .container {
    .operation {
      color: green;
    }
    .row {
      ^[-1..-1]:is-active ^[0], ^[-1..-1]:hover ^[0] {
        .operation {
          color: inherit;
        }
      }
    }
  }

少なくともオプションが提供される可能性がありますが、残念ながらSASSはあなたが試みていることを達成できません。

于 2016-10-23T07:45:13.493 に答える