nlog

とめどなく流れるよだれ

Sass で親に疑似クラスをもつセレクターを指定する

f:id:namikuguri:20180223022234p:plain

&__action のコンパイル結果は .blockLink:hover__action になるが、

前回のこれ、Sass の機能をうまく使えばなんとかなる気がしていくつか試してた。

.blockLink {
  &:hover {
    @at-root #{selector-replace(&, &, ".blockLink:hover .blockLink__action")} {
      background-color: red;
    }
  }
}

とりあえず書いてみたけど selector-replace 使う意味がない。ので削る。

.blockLink {
  &:hover {
    @at-root .blockLink:hover .blockLink__action {
      background-color: red;
    }
  }
}

いや、本末転倒というか、& (アンパサンド)殺してSass の魅力殺してる... 。ネストをやめて普通にいこう。

状態を変更するセレクター下にスタイルを指定(状態セレクターをネストさせずに書く) | JSfiddle

.blockLink {
  &:hover &__action {
      background-color: red;
  }
}

ネストされたセレクターから親の親を遡れたら &:hover にネストされた &__action もうまく動くと思ったけど、考えてみると親の親を遡る機能があったとしてもその記法を覚えていられる自信がない。機能としてあまり必要とされてないからない?のかな。インターネットで見つけられなかった。

追記

ネストされた親子関係をわかりやすくするという意味では、こういうのもありなんかな。

.blockLink {
  &:hover {
    & #{selector-replace(&, &, '.blockLink')}__action {
      background-color: red;
    }
  }
}

本当は & #{selector-replace(&, ':hover', '')}__action { ... } とかできるようにしてほしい。:hover の部分を trim したいけど、いまの Sass ではできない。