ハンバーガーメニューとかで、.isOpenedでスタイルを変えるときにハマりました。
ボタンに.isOpenedをつけて中のスタイル変えたいけど、
どうやって途中のtogglerまで戻れば良いのかわからない。

.navbar {
  &-toggler {
    &.isOpened {
      〜
    }
    &-bar {
      &:nth-of-type(1) {
        〜
        .isOpened & {
          //NG .navbarの頭についてしまう
        }
      }
      &:nth-of-type(2) {
        〜
      }
      &:nth-of-type(3) {
        〜
      }
    }
  }
}

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

回答1件

ベストアンサー

scss
1.navbar {
2  
3}
4.navbar-toggler {
5  &.isOpend {
6    
7  }
8}
9.navbar-toggler-bar {
10  &:nth-of-type(1) {
11    @at-root {
12      .navbar-toggler.isOpend & {
13        
14      }
15    }
16  }
17  &:nth-of-type(2) {
18    
19  }
20  &:nth-of-type(3) {
21    
22  }
23}

@at-root を使えば一番上の階層まで辿れるのでそこから指定するやり方がいいかもしれません。または、現在の階層を変数で持たせておくとか。
@at-root を使うときはすべてネストするのではなく、上のようにできるだけ浅い階層にしておくと楽です。

追記

scss
1.navbar-toggler-bar {
2  &:nth-of-type(1) {
3    // ①
4    @at-root {
5      .navbar-toggler.isOpend & {}
6    }
7    // ②
8    .isOpened & {
9      
10    }
11  }
12}

①と②の違いですが、これは実際にコンパイルしてみればわかります。

css
1/* ↓① */
2.navbar-toggler.isOpend .navbar-toggler-bar:nth-of-type(1) { ... }
3
4/* ↓② */
5.isOpened .navbar-toggler-bar:nth-of-type(1) { ... }

@at-root を使うと、@at-root { } 内は一番上の階層と同じ扱いになります。

scss
1.navbar {
2  &-toggler {
3    &.isOpened {  }
4    &-bar {
5      &:nth-of-type(1) {
6        @at-root {
7          .navbar {
8            &-toggler {
9              &.isOpend {
10                
11              }
12            }
13          }
14        }
15      }
16    }
17  }
18}

別にすべてネストしても構いませんが、見づらくなるだけという話です。

そもそも出力したいCSSがあっているのかわからないのですが、①であっていますかね。

投稿2017/12/15 13:12

編集2017/12/18 07:31

Takamoso

総合スコア248

kumakuma112

2017/12/18 02:08

階層は浅くするしかないのですね。 @at-root入れるのと.xxxx &のみでは何か違いあるのでしょうか？ ``` .navbar-toggler-bar { &:nth-of-type(1) { @at-root { .navbar-toggler.isOpend & {} } .isOpened & {} } &:nth-of-type(2) { } &:nth-of-type(3) { } } ```

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