1.背景介紹
關於sass
sass 的開發文件中如此描述自己： sass 是 css 的乙個擴充套件,它使 css 的使用起來更加優雅和強大。
sass 的終極目標是解決 css 的缺陷。
如我們所知，css 並不是乙個完美的語言。css 雖然簡單易學，卻也能迅速製造嚴重的混淆，尤其是在工程浩大的專案中。 這就是 sass 出現的契機，作為一種元語言，通過提供額外的功能和工具可以改善 css 的語法。同時，保留了 css 的原有特性。
sass 存在的關鍵不是將 css 變成一種全功能程式語言，它只是想修復缺陷。正因如此，學習 sass 如同學習 css 一樣簡單：它只在 css 的基礎上新增了幾個額外功能。
使用這些功能的方式卻是多種多樣的。有一些是好的，有一些是壞的，還有一些令人費解。本節課就是為了提供乙個sass樣式指南,給你乙個統一的和歷經實踐的方式來編寫 sass **。
為何選擇sass？
忽略其他特性，sass 對自己的定位首先是乙個預處理器。其最主要的競爭對手包括 less，乙個基於 nodejs 的預處理器，因著名 css 框架 bootstrap（在 v4 版本之前）的使用而聲名鵲起,現在其也已經使用sass。此外還有 stylus，該預處理器對編寫形式無所限制，學習難度稍高。 為什麼選擇 sass 勝過其他預處理器？，這始終是乙個待解決的問題。
sass 它最大程度保留了 css 的原生特性。
sass 的設計基於非常堅實的設計原則：大部分的設計順其自然的**於核心設計師們的信條，比如新增額外的功能會增加語言的複雜度，但以實用性衡量極具價值的話便得以保留；
同時，使用 sass 來美化乙個塊級元素，那麼美化前後的效果應該是可預見和可推理的。
同時，sass 比其他預處理器更加關注細節。
sass 與 css 在細節上的一致性，並確保所有的常用方式具有高度一致的表現。
sass 的目標是解決開發者遇到的切實問題，提供高效的函式化解 css 的短板。
2.知識剖析
樣式指南（注意不是視覺風格指南）用於團隊是乙個很有價值工具：
長時間內便於建立和維護專案
便於不同能力的和專業的開發使用
便於任何時間加入團隊的不同開發人員
便於新員工培訓
便於開發人員建立**庫
核心原則
整個樣式指南中傳授的，那就是：sass 以簡為美，簡約至上。
同時，css 是一門簡單的語言，那麼 sass 在書寫常規 css 的時候就不應該更複雜。
kiss principle (keep it ****** stupid) 在這裡是乙個核心原則，甚至在有些情況下要優先於dry principle (don』t repeat yourself)。
有時候，一點點重複可以更好的保持**的可維護性，而不是建立乙個頭重腳輕、臃腫複雜、不可維護的系統。
實用勝過完美。有些時候，你可能會發現自己違背了這裡所描述的規則。如果感覺自己的方式有道理，那就繼續。
語法格式
當幾個開發者在同一專案中編寫 css 時，遲早會陷入各自為政的境地。
編碼樣式指南通過規範統一的樣式，不僅防止了這種混亂現象，也減輕了閱讀和維護**的難度。
概括地說，我們希望做到（受 css guidelines 所啟發）：
使用兩個空格代表縮排，而不是使用tab鍵；
理想上，每行保持為80個字元寬度；
正確書寫多行css規則；
有意義的使用空格。
字串字串在 css 和 scss 中都占有重要地位。大多數的 css 值不是長度就是識別符號，所以遵循固定的程式設計規範處理 sass 中的字串是非常重要的一項工作。 編碼 為了避免潛在的字元編碼問題，強力建議在入口檔案中通過 @charset 指令使用 utf-8 編碼格式。 請確保該指令是檔案的第一條語句，並排除其他字元編碼宣告。 @charset 'utf-8';
顏色顏色在 css 中占有重要地位。當涉及到操縱色彩時，sass 通過提供少數的函式功能，最終成為了極具價值的助手。 顏色格式 為了盡可能簡單地使用顏色，我建議顏色格式要按照以下順序排列： hsl 值; rgb 值; 十六進製制（使用小寫並盡可能簡寫）
基本上，任何不能明顯看出意義的地方都應該注釋，但不要隨處注釋。記住不要注釋太多，掌握尺度讓每一處注釋都有意義。 當注釋 sass 的乙個特定部分時，應該使用 sass 單行注釋而不是 c 風格的注釋塊。這麼做將不會輸出注釋。
3.常見問題
選擇器巢狀
sass 中乙個正在被眾多開發者濫用的功能，就是選擇器巢狀。選擇器巢狀為樣式表作者提供了乙個通過區域性選擇器的相互巢狀實現全域性選擇的方法。 選擇器巢狀最大的問題是將使最終的**難以閱讀。開發者需要花費巨大精力計算不同縮排級別下選擇器具體的表現效果。css 最終的表現效果往往不是淺顯易懂的。 選擇器越具體則宣告語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這非常不值得。
4.常見問題
為了防止此類情況，建議巢狀不要超過三層，我的意見比較激進，建議盡量避免使用巢狀。
例外:首先，在最外層選擇器中巢狀偽類和偽元素是被允許，也是受推薦的。
.foo
&::before
}使用選擇器巢狀選擇偽類和偽元素不僅僅有道理的（因為它的處理功能與選擇器緊密相關），而且有助於保持總體的一致性。
當然，如果使用類似 .is-active 類名來控制當前選擇器狀態，也可以這樣使用選擇器巢狀。
.foo
}這並不是最重要的，當乙個元素的樣式在另乙個容器中有其他指定的樣式時，可以使用巢狀選擇器讓他們保持在同乙個地方。
.foo
}5.編碼實戰
6.擴充套件思考
問題：sass和less的不同？
1,變數名稱的不同，less是@，sass是$;
2,sass的安裝需要ruby環境，是在服務端處理的， 而less是需要引入less.js來處理less**輸出css到瀏覽器; ，也可以在開發環節使用less，然後編譯成css檔案，直接放到專案中;
3，sass支援條件語句，比如if else for等，less不支援;
4,sass可以設定輸出型別， nested：巢狀縮排的css** expanded：展開的多行css** compact：簡潔格式的css** compressed：壓縮後的css代 less不可以
7.參考文獻
碼農sass 教程 - sass入門學習
sass中文網
sass/scss 和 less的區別
8 更多討論
（1）**sass查詢的寫法
scss中的**查詢@media可以巢狀使用：a}
編譯後：
a @media screen and (min-width: 1200px)
}（2）
使用加減乘除要注意什麼
需要加括號
（3）在乙個檔案中定義了全部的變數。在其他檔案中會用到。但是沒有引入。而是在乙個公共檔案中集中引入。編譯的時候會報變數未定義。
sass本質上是一種對css進行編譯的手段，最後還是會編譯成原始css。所以在所有用到該變數的scss檔案裡都需要引入該檔案，比如，你所有的全域性scss變數都定義在 variable.scss 的檔案裡，要用到variable裡的變數，就必須引入variable.scss。
修真院WEB小課堂 css有哪些選擇器
在html頁面中,如果我們想要去改變乙個元素的字型大小 尺寸 顏色 樣式等 就需要用到css選擇器來進行對修改元素一對一或者多對一的進行匹配並改變其樣式,這就是css選擇器。選擇器是一種模式，它能在頁面上匹配一些元素，使相關的宣告僅被應用到被選擇的元素上。1 命名 w3c css2.1的 4.1.3...
修真院小課堂 z index初解，工作原理
今天給大家分享一下，修真院官網前端任務4，深度思考中的知識點 z index初解，工作原理 一，背景介紹 1.含義 z index屬性指定了元素及其子元素的 z順序 而 z順序 可以決定當元素 發生覆蓋的時候，哪個元素在上面。通常乙個較大的z index值的元素會覆蓋較低的那乙個 前提是元素支援z ...
修真院 BFC及其如何工作
目錄 1.背景介紹 2.知識剖析 3.常見問題 4.解決方案 5.編碼實戰 6.擴充套件思考 7.參考文獻 8.更多討論 一，背景介紹 什麼是fc？fc的全稱是 formatting contexts，是w3c css2.1規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子...