SCSS、Bootstrap定製
Bootstrap重點：媒體查詢技術+柵格佈局+SCSS
1 SCSS
1.1 動態語言概述
CSS缺點：
- 語法不夠強大，沒有變量和合理的樣式複用機制；
- 邏輯上相關的屬性值必須以字面的形式重複輸出，難以維護；
- 動態樣式語言爲css賦予動態語言的特性，極大的提高了樣式語言的可維護性
動態樣式語言需要使用預處理器(用一種專門的編程語言進行web頁面設計，通過編譯器轉化爲css文件供項目使用)
常見動態語言：
- SCSS(Bootstrap4)/Sass：scss兼容sass；更接近css的寫法；
- stylus
- Less(Bootstrap3)
1.2 SCSS定義
SCSS是動態的樣式語言，在CSS語法基礎上增加變量、嵌套、混合、導入、函數等高級功能，是強化CSS的輔助工具。
SCSS的作用：更好地管理樣式文件以及更高效地開發項目
boot的SCSS文件夾中有很多_*.scss文件，這些文件會被引入進不帶_開頭的scss文件中，來生成css樣式表；瀏覽器不認識scss，只能解析css文件。
1.3 SCSS的使用
在服務器端使用：
- 安裝nodejs解釋器(版本在8.11以上)
- 安裝scss編譯程序npm install -g node-sass；node-sass -v檢測版本
- 在命令行運行sass轉換程序
單文件轉換命令：
node-sass scss文件路徑 生成的css文件路徑
多文件轉換命令：
node-sass scss文件夾路徑 -o css文件夾路徑
單文件監聽：
node-sass -w scss文件路徑 生成的css文件路徑
多文件監聽：
node-sass -w scss文件夾路徑 -o css文件夾路徑
1.4 SCSS語法
-
註釋
多行註釋/* */會被轉換到css文件中
單行註釋(靜默註釋)//不會被轉換到css文件中(CSS不支持單行註釋) -
變量
使用$符號來標識變量，用於將多次使用的數據聲明爲一個反覆使用的變量，遵循css選擇器命名規範$name: value;。
顏色變量、數值變量、字符串變量、樣式變量；
在樣式內部聲明變量時可以引用其他變量，但需要在該變量的作用域內；
重複聲明變量，後聲明的變量會覆蓋前面變量，不存在js變量聲明提前的情況；
!default規則，如果變量已經聲明賦值，使用之前聲明的值，否則使用現在聲明的值； -
嵌套規則(後代選擇器)
CSS重寫選擇器不便，sass提供嵌套簡化樣式的編寫，使樣式可讀性更高(明確表現出層次關係，無代碼冗餘)；
僞類嵌套：在標籤內部嵌套寫hover，使用&符號代替標籤本身；
羣組選擇器嵌套：
nav, aside, footer {a{color:#444p;}}
屬性嵌套：
div {border:{style:solid;width:2px; color:red;}} -
導入SCSS文件
在SCSS中，局部文件名以下劃線開頭；sass編譯時不會編譯以下劃線開頭的文件，而是用作導入。
引用局部文件，使用關鍵字@import “局部文件名”，局部文件省略下劃線和後綴，並且可以同時被多個SCSS文件引用。 -
混合器
把需要在多個樣式中出現的相同部分封裝到混合器中；
關鍵字@mixin 混合器名稱{重用的樣式}，關鍵字@include 混合器名稱可以使用封裝好的樣式； -
帶參混合器
@mixin 混合器名稱(形參1， 形參2， 形參3) { 屬性1：形參1；屬性2：形參2；屬性3：形參3； }使用
@include 混合器名稱(實參1，實參2， 實參3);傳參調用 -
繼承
選擇器可以繼承另一個選擇器定義的所有樣式；
@extend 選擇器，實現繼承。
在css中表現形式是兩個選擇器共有的部分變成羣組選擇器 -
運算
1）數字
Scss支持數值的四則運算和取餘，支持不同單位間的轉換，但相對單位rem和em轉換不了；
加法： +做字符串連接，結果有沒有引號和第一個字符串一致；
減法： 減號會被優先解析爲變量名的一部分，所以使用變量和減法，需要在-前後添加空格；
除法： 在scss斜槓/通常起分割數字的作用，同時具備除法運算功能：
如果值或者值的部分是變量或者函數返回值；如果值被圓括號包裹；如果值是算術表達式的一部分；
運算表達式與其它值連用用空格連接；
有引號的字符串中，使用#{}插值語句添加動態的值；
2）顏色
rgb三原色分開計算各自的值；
rgba必須具有相同的alpha才能進行計算 -
函數
SCSS定義了多種函數，有些可以直接被css語句調用。
1）顏色函數：hsl(hue, saturation, lightness);
hue：色調 取值0~360 3個色段，每120一個；
saturation：飽和度 取值0.0%~100.0%
lightness：亮度 取值0.0%~100.0%
用法同rgba，會被自動編譯成rgb格式；
2）數字函數
round($ value) ceil floor min max random
3）字符串函數
unquote($ string)刪除字符串的引號
quote($ string)給字符串添加引號
To-upper-case
To-lower-case
4）自定義函數
@function 函數名(形參) {@return 結果}
調用：函數名(實參);
5）控制指令
大體同js中if-else語句，只需要在if 和else-if和else前加@字符，唯一不同的是條件表達式可以不加括號。