深入淺出 Sass 巢狀

前言

相信許多的後輩，仍前撲後繼的想成為前端工程師
而在這條寫css的路上，一定聽過Sass(預處理css)
其實就是改變平常寫css的習慣
將它變得好整理以及好維護
當然沒有一套最好的標準，畢竟方式都是人制訂出來的
像是隨便搜尋，都一堆人講css命名規範！
甚至很好找到中文解析：（這裡先隨意找一篇）
【YJ BLOG】-Scalable CSS - 介紹OOCSS/SMACSS/BEM
無非是為了易懂的方式撰寫

好的今天主講的是，初探

找一隻檔名為.scss .sass
裡面一定會是很可怕的巢狀

別緊張
你只要了解這個”&“
巢狀再複雜也只是個笑話
因為馬上你就會在腦海裡 compile 出 .css 檔

1. &就是sass字串連接的概念
   就像是在js上，字串的連接是用.

2. 好的，再來了解一件事，使用”&“代表假巢狀
   真巢狀就是代表下一階層
   假巢狀就是沒有階層

就這2點
記住就可以開始練習看檔案了

簡單來看這個檔案（別人的檔案隨便找的）

你可以看到上面的例子 .sass檔
最後經由 compile 出 css 檔，網頁才能動，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.comment-box {
  height: 40px;
  border-bottom: 1px solid #ddd;
}
.comment-box_left-block, .comment-box_right-block {
  float: left;
  height: 100%;
}
.comment-box_left-block {
  width: 80%;
}
.comment-box_left-block .input-text {
  width: 100%;
  height: 100%;
}
.comment-box_right-block {
  width: 20%;
}
.comment-box_right-block .btn-submit {
  width: 100%;
  height: 100%;
}

1. 可以看到字被串起來了.comment-box_left-block
2. 假巢狀

.comment-box 跟 .comment-box_left-block
在css裡面是，解讀為兩個獨立的個體
等於是將.comment-box_left-block 跳脫 .comment-box 巢狀階層

所以”&“這個是為了解決什麼？

1. 可以減少階層（防止不易閱讀、以及css讀取）
2. 獨立個體，所以得注意 selector 的覆寫

這個例子，可以看出寫者，很清楚地在打架構，所以可以這樣寫
要是你對.comment-box_left-block
下太多客製化的屬性，border,background-color…..等等
會讓自己窒礙難行！
真要做就都包在 comment 下的階層吧！
真巢狀，讓這個命名不會被提升，僅存在 comment 底下

當然 Sass 目的之一是為了快速開發！
無非就是讓寫 css 的各位，使用巢狀階層方式，打造出好幾行的 css

補充

在之前的sass版本，這個 & 是沒有做到像連接詞一樣的功能！
因此以前很少被大量的使用！
我認為要正確使用，必須建置在你有正確的命名規範，和架構之下
想清楚現在要寫大架構，還是客製化區塊，再開始寫 Sass