SCSS 巢狀選擇器

SCSS 的巢狀標籤，能幫助我們建構出更簡潔、直觀的代碼，讓我們看一些相關的範例：

.nav {

     .inner {
         ...
     }
 }

這個結構表示 .nav 裡面的 .inner。所以會會匯出：

.nav .inner { ... }

接下來我們看看，若要選擇多個子元素要如何應用：

.nav {

     .inner, .content {
         ...
     }
 }

如此 .inner 與 .content 都會繼承到 .nav 這個父元素。所以會會匯出：

.nav .inner, .nav .content { ... }

有時候會用到 a:hover 之類的選擇器，就必須使用到＆符號：

a {

     &:hover {
         ...
     }
 }

＆即代表“目前所在的選擇器(沒有空格)”，因此會匯出以下 code：

a:hover { ... }

相同道理：

div {

     &.inner {
         ...
     }
 }

會匯出：

div.inner { ... }

另外，巢狀標籤也可以反向繼承，比如說：

.nav {

     body & {
         ...
     }
 }

前面說明＆即代表“目前所在的選擇器”，相同道理，在這裡即會會匯出：

body .nav { ... }

別忘了 SCSS 與 CSS 是完全相容的，並不一定每一層都要展開來寫：

.nav ul {

     li a {
         ...
     }
 }

會匯出：

.nav ul li a { ... }

暸解了 SCSS 的巢狀結構之後，是不是覺得與原本的 CSS 差不多，很容易上手呢？
其實只要稍微了解 ＆ 號的作用，大部分的邏輯就相當簡單了。