回答編集履歴

1

追記

2017/12/18 07:31

投稿

Takamoso
Takamoso

スコア248

test CHANGED
@@ -53,3 +53,111 @@
53
53
  `@at-root` を使えば一番上の階層まで辿れるのでそこから指定するやり方がいいかもしれません。または、現在の階層を変数で持たせておくとか。
54
54
 
55
55
  `@at-root` を使うときはすべてネストするのではなく、上のようにできるだけ浅い階層にしておくと楽です。
56
+
57
+
58
+
59
+ # 追記
60
+
61
+
62
+
63
+ ```scss
64
+
65
+ .navbar-toggler-bar {
66
+
67
+ &:nth-of-type(1) {
68
+
69
+ // ①
70
+
71
+ @at-root {
72
+
73
+ .navbar-toggler.isOpend & {}
74
+
75
+ }
76
+
77
+ // ②
78
+
79
+ .isOpened & {
80
+
81
+
82
+
83
+ }
84
+
85
+ }
86
+
87
+ }
88
+
89
+ ```
90
+
91
+
92
+
93
+ ①と②の違いですが、これは実際にコンパイルしてみればわかります。
94
+
95
+
96
+
97
+ ```css
98
+
99
+ /* ↓① */
100
+
101
+ .navbar-toggler.isOpend .navbar-toggler-bar:nth-of-type(1) { ... }
102
+
103
+
104
+
105
+ /* ↓② */
106
+
107
+ .isOpened .navbar-toggler-bar:nth-of-type(1) { ... }
108
+
109
+ ```
110
+
111
+
112
+
113
+ `@at-root` を使うと、`@at-root { }` 内は一番上の階層と同じ扱いになります。
114
+
115
+
116
+
117
+ ```scss
118
+
119
+ .navbar {
120
+
121
+ &-toggler {
122
+
123
+ &.isOpened { }
124
+
125
+ &-bar {
126
+
127
+ &:nth-of-type(1) {
128
+
129
+ @at-root {
130
+
131
+ .navbar {
132
+
133
+ &-toggler {
134
+
135
+ &.isOpend {
136
+
137
+
138
+
139
+ }
140
+
141
+ }
142
+
143
+ }
144
+
145
+ }
146
+
147
+ }
148
+
149
+ }
150
+
151
+ }
152
+
153
+ }
154
+
155
+ ```
156
+
157
+
158
+
159
+ 別にすべてネストしても構いませんが、見づらくなるだけという話です。
160
+
161
+
162
+
163
+ そもそも出力したいCSSがあっているのかわからないのですが、①であっていますかね。