一、sass語法
1.1 聲明變量-普通變量-默認變量-特殊變量-全局變量
定義變量的語法:
普通變量 定義之后可以在全局范圍內使用。 $fontSize: 12px; body{ font-size:$fontSize; }
默認變量 sass 的默認變量僅需要在值后面加上 !default 即可。 $baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; } sass 的默認變量一般是用來設置默認值,然后根據需求來覆蓋的,覆蓋的方式也很簡單,只需要重新聲明下變量即可。
全局變量——在變量的后面加上[!global]即可聲明全局變量。sass 規划是 3.4 以后的版本中就會增加這個功能。
特殊變量:一般情況下,我們定義的變量都是屬性值,可以直接使用,但是如果變量作
為屬性或者其他的特殊情況下,必須使用#{$variable}的形式進行調用。
#{$variable}
就是取值的一種特殊形式,符合特殊用法。
2.2 sass嵌套-選擇器嵌套
SASS 中的嵌套主要說的是選擇器嵌套和屬性嵌套兩種方式,正常項目中通常使用的都是選
擇器嵌套方案
【注】在嵌套的過程中,如果需要用到父元素,在 SASS 中通過&符號引用父屬性
2.3 sass嵌套-屬性嵌套
嵌套屬性——不常用 所謂屬性嵌套,是指某些屬性擁有同樣的單詞開頭,如:wborder-color 都是以 border 開頭的,所以就出現了屬性嵌套語法
2.4 sass混合-Mixin
sass 中可以通過@mixin 聲明混合,可以傳遞參數,參數名稱以$開始,多個參數之間使用
逗號分隔,@mixin 的混合代碼塊由@include 來調用
2.5 sass繼承拓展-@extend
在 SASS 中,通過繼承/擴展來減少重復代碼,可以讓一個選擇器去繼承另一個選擇中所有
的樣式。
繼承某個樣式的同時,也會繼承樣式的擴展。
2.6 Partitials和@import
Partials 是用來定義公共樣式或者組件的樣式的,專門用於被其他的 scss 文件 import
進行使用的
在 SCSS 文件中引入指令@import 在引入 Partials 文件時,不需要添加下划線。詳細參
考案例代碼。
聲明公共樣式,公共樣式文件要以 _
2.7 sass注釋
SASS 中提供了三種注釋 多行注釋 在編譯輸出的 css 文件中會保留,壓縮輸出格式中不會保留 --style compressed /* * 多行注釋 */ 單行注釋 在輸出 css 文件時不保留 // 單行注釋 強制注釋 在多行注釋的開頭,添加感嘆號!表示強制保留 /*! * 強制注釋 */
2.8 sass數據類型
Sass 支持7種主要的數據類型 > 數字(例如: 1.2, 13, 10px) > 字符串(例如:"foo", 'bar', baz) > 顏色(例如:blue, #04a3f9, rgba(255, 0, 0, 0.5)) > 布爾值(例如: true, false) > 空值(例如: null) > 列表(list),用空格或逗號分隔 (例如:c 1.5em 1em 0 2em, Helvetica, Arial, sans-serif) > 映射(例如: (key1: value1, key2: value2)) map映射 鍵->值
2.9 數字&數字函數
在 SASS 中可以對數字進行運算
同時 SASS 支持數字函數的運算
2.10 sass字符串
SASS 支持字符串的操作 同時 SASS 對字符串的操作有一些封裝的函數的支持,方便快捷的處理字符串操作。 更多操作請參考官方文檔。 http://sass.bootcss.com/docs/sass-reference/
2.11 sass顏色
顏色的表示有很多種 > 十六進制 Hex:#ff0000 等等 > RGB:rgb(255, 0, 0)等等 > 字符串:red, blue, green 等等 > 等等.. .. 【注】SASS 支持所有這些顏色的表示方式 相信大家對這些顏色的表示方式應該非常熟悉了 顏色函數——rgb & rgba 通過 rgb()的形式進行顏色的控制【紅、綠、藍】
2.12 sass列表-list
list 表示列表類型的值 在 CSS 中就是表示屬性的一串值 列表中的值可以使用空格或者逗號分隔,如 > border:#ccc solid 1px; 值就是列表 > font-family:Courier, “Lucida Console”, monospace; 值也是列表 列表中可以包含其他的列表,如: > padding:10px 5px, 5px 5px; 值的列表中有兩個列表,用逗號分隔 > padding:(10px 5px) (5px 5px);可以用括號分開,編譯成 css 時會去掉這些括號
列表函數
SASS 中的列表相當於其他語言中的數組,SASS 也提供了一些函數方便列表的操作 length:獲取列表長度 nth:獲取指定位置的列表項 index:獲取某個元素在列表中的位置,如果沒有查詢到返回 null append:給指定的第一個列表添加一個列表項 join:合並列表
2.13 sass映射map
map 就是列表項目中帶名稱的列表 > $map:(key1:value1, key2:value2, key3:value3) > $var(key1:value1, key2:value2..):聲明一個 Map > length($map):獲取 map 中的元素對個數 > map-get($map, key):獲取$map 中名稱為 key 的值 > map-keys($map):獲取指定$map 中所有的 key > map-values($map):獲取指定$map 中所有的 value > map-has-key($map, key):判斷在$map 中是否包含指定的 key > map-merge($map1, $map2):將$map1 和$map2 合並在一起 > map-remove($map, key):將指定名稱的 key 從$map 中移除
2.14 sass布爾值
SASS 中的布爾值,跟其他語言一樣,都是用來表示真/假的邏輯判斷的。 取值:true/false,sass 中可以使用比較運算符,返回的就是布爾值 > 比較運算符 > >、 >=、 <、 <=、 !=、 == > 邏輯運算符 > and、or、not
2.15 控制指令-control Directives
SASS 中為了更加方便的處理一些帶有邏輯性的樣式,如滿足某些條件的時候使用指定的樣 式,或者根據指定列表中的項目循環輸出樣式等,提供了一些控制指令進行處理 > @if:條件控制指令 > @for:循環指令 > @each:循環指令 > @while:循環指令
@if 指令是 SASS 中的一個控制指令,用於在表達式滿足條件(true)的時候輸出指定的 樣式,在不滿足條件(false)或者表達式為 null 的情況下輸出其他的樣式 【注】同樣,也可以通過@else if 和@else 指令結合,進行多條件的判斷
2.16 sass-@for
@for 指令在 SASS 中用於重復處理一組指令 有兩種表現形式 > @for $var from <開始值> l <結束值> > @for $var from <start> to <end> <1> to 和 through 都是表示一個區間 <2> 唯一的區別就是停止循環的地方不一樣 <3> $var 可以是任意一個變量名稱如$i <5> <start>和<end>是 SASS 表達式並且必須是整數
2.17 sass-@each
@each 在 Sass 中主要被用來進行列表或者映射數據的循環 主要表示形式:@each $var in <list> $var 可以是任意變量名稱,<list>是 SASS 表達式並且必須是 List
2.18 sass-@while
@while 指令在 SASS 中用於循環重復處理樣式,直到@while 表達式返回 false
2.19 sass用戶自定義函數-function
函數的功能主要是數據的運算,SASS 中可以將一些值交給函數進行處理,具體的處理方式 由定義的函數具體的設計確定。 @function 函數名稱(參數列表){ // 數據處理 }
2.20 sass警告 VS 錯誤
在自己設計的函數或者 Mixin 中,可以包含一些警告或者錯誤提示信息,用戶在錯誤使用 函數或者 mixin 時,就會看到這樣的錯誤提示。 > @warn:警告信息——會出現在命令行窗口中,編譯提示 > @error:錯誤信息——會出現在編譯后的 css 文件中,錯誤提示 @warn message; 警告信息,警告信息一般會在執行 scss 程序生成 css 時觸發,所以 出現在命令行中。 @error message; 錯誤信息,錯誤信息直接顯示在編譯的 css 文件中。