SCSSを使ったBEM記法でのhoverの書き方

最近dart Sassを導入しました。
そこでBEM記法に対してhoverの記述をscssに記述する際によくわからなかったので質問させていただきました。

したいことは下記のコードでクラス名: button__linkに触れたらhoverさせたいです。

[HTML]

<div class="contents">

  <!--  other contents 
    ~~~~~~~~
  -->

  <div class="button">
    <a class="button__link" href="#">
      <p class="button__text">View More</p>
    </a>
 </div>
</div>

[SCSS]

.contents {
  .button {
    &__link {
      background-color: #FFF;
    $this: &; // 現在のBEMの位置を取得
      &::before {}
      &::after {}
      &:hover {
        #{$this} {
        // here
          background-color: #333;
        }
      }
    }
    &__text {}
  }
}

上記のコードでは思った通りには動かなかったです。
デベロッパーツールを使って.button__linkに:hoverをしてもコードは表示されず、記述したアニメーションも動作しませんでした。
どうかご教示ください、よろしくお願いします。

// 環境---------------
// windows11
// Visual Studo Code
// --------------------

arcxor

2022/06/05 14:47

$this という変数は何のために記述しているのでしょうか。

kurokuma

2022/06/06 03:27

ご連絡遅れました、すみません。絶対パスで:hoverを指定しようとしていました。そうすると&__text {}にも適応されてきれいになるかと思いました。ただ少し誤解していて、なぜか&__link {}にも適応させようとしていたので、:hoverが適応されなくて混乱状態で質問してしまいました。

kurokuma

2022/06/06 03:51

すみません、誤解が積み重なってややこしくなり、質問が解決していなかったので、もう一度質問させていただきました。よろしければこちらでもご回答の程、よろしくお願いします。 https://teratail.com/questions/c47kqlk9qyo66k

行動規範の内容に同意します

回答1件

ベストアンサー

SCSSは普通に書いたらいいと思います。
ただ、インラインの中にブロックを入れると、あまりいいことはないです。

SCSS
1.contents {
2  .button {
3    &__link {
4      display: block; // ←ブロックにする
5      background-color: #FFF;
6    // $this: &; // ←いらない
7      &::before {}
8      &::after {}
9      &:hover {
10        // #{$this} { ←いらない
11        // // here
12          background-color: #333;
13        // } ←いらない
14      }
15    }
16    &__text {}
17  }
18}