1-4 sass 程式設計基礎
有了前面的 quick start 部門的簡單了解，基本能描述清楚 sass 的用途了，具體的控制
樣式 css 的定義和其他的程式開發操作，就需要對 sass 中提供的各種基礎性的知識有一
個簡單的認知和應用過程。
1-4.1.1 變數——variables
sass 中的變數，必須是katex parse error: unexpected character: '' at position 108: …稱，即可引用定義的變數的值。 ̲ 普通變數，定義之後可以在全域性…variable}的形式進行呼叫。
#就是取值的一種特殊形式，符合特殊用法。
sass 教程
demo.scss
demo.css
全域性變數——在變數的後面加上[!global]即可宣告全域性變數。sass 規劃是 3.4 以
後的版本中就會增加這個功能。
1-4.2 巢狀——nesting
sass 中的巢狀主要說的是選擇器巢狀和屬性巢狀兩種方式，正常專案中通常使用的都是選
擇器巢狀方案
選擇器巢狀
demo.scss
demo.css
sass 教程
1-4.3 巢狀——父屬性呼叫
在巢狀的過程中，如果需要用到父元素，在 sass 中通過&符號引用父屬性
1-4.4 巢狀屬性
巢狀屬性——不常用
所謂屬性巢狀，是指某些屬性擁有同樣的單詞開頭，如：border-left,border-color
都是以 border 開頭的，所以就出現了屬性巢狀語法
demo.scss
demo.css
1-4.5 混合——mixin
sass 中可以通過@mixin 宣告混合，可以傳遞引數，引數名稱以$開始，多個引數之間使用
逗號分隔，@mixin 的混合**塊由@include 來呼叫
無引數混合——不建議使用，如果是這樣的**塊，直接使用後面提到的@extend 來
處理demo.scss
sass 教程
demo.css
有引數混合
demo.scss
demo.css
多引數混合
demo.scss
demo.css
sass 教程
1-4.6 繼承擴充套件——inheritance（@extend）
在 sass 中，通過繼承/擴充套件來減少重複**，可以讓乙個選擇器去繼承另乙個選擇中所有
的樣式。
繼承某個樣式的同時，也會繼承樣式的擴充套件。
案例
06extend.scss
06extend.css
1-4.7 partials && @import
css 本身包含乙個指令@import，但是 css 中的@import 每次執行都會傳送一次新的請
求都會消耗一定的資源
sass 中擴充套件了這個指令，會將包含的編譯成乙個 css 檔案，切割成小的部分（partials）
包含進來進行處理。
partials 這樣的檔案，命名規範是以下劃線開頭的，這樣的 scss 檔案不會被編譯成 css
sass 教程
檔案。partials 是用來定義公共樣式或者元件的樣式的，專門用於被其他的 scss 檔案 import
進行使用的
在 scss 檔案中引入指令@import 在引入 partials 檔案時，不需要新增下劃線。詳細參
考案例**。
案例：
_base.scss
07partials.scss
07partials.css
1-4.8 注釋
sass 中提供了三種注釋
多行注釋
sass 教程
在編譯輸出的 css 檔案中會保留，壓縮輸出格式中不會保留/* ap
,key
):獲取
map, key):獲取
map,ke
y):獲
取map 中名稱為 key 的值
map-keys(map
):獲取
指定
map):獲取指定
map):獲
取指定map 中所有的 key
map-values(map
):獲取
指定
map):獲取指定
map):獲
取指定map 中所有的 value
map-has-key(map
,key
):判斷
在map, key):判斷在
map,ke
y):判
斷在map 中是否包含指定的 key
map-merge($map1, map
2):將
map2):將
map2):
將map1 和katex parse error: unexpected character: '' at position 12: map2 合併在一起 ̲ map-remove(map, key):將指定名稱的 key 從$map 中移除
sass 教程
-4.23 布林值
sass 中的布林值，跟其他語言一樣，都是用來表示真/假的邏輯判斷的。
取值：true/false,sass 中可以使用比較運算子，返回的就是布林值
比較運算子
>、 >=、 <、 <=、 !=、 ==
邏輯運算子
and、or、not
1-4.24 interpolation
interpolation 可以將乙個值插入到另乙個值中。
sass 中可以將表示式放在#中，用於使用變數的值
katex parse error: expected 'eof', got '#' at position 22: …n:0.0.1; /*專案版本#̲*/
$name:」info」;
katex parse error: expected 'eof', got '#' at position 23: …order」; .alert-#̲ -color:#ccc;
}sass 教程
1-4.25 控制指令——control directives
sass 中為了更加方便的處理一些帶有邏輯性的樣式，如滿足某些條件的時候使用指定的樣
式，或者根據指定列表中的專案迴圈輸出樣式等，提供了一些控制指令進行處理
@if：條件控制指令
@for:迴圈指令
@each:迴圈指令
@while:迴圈指令
1-4.26 @if
@if 指令是 sass 中的乙個控制指令，用於在表示式滿足條件（true）的時候輸出指定的
樣式，在不滿足條件（false）或者表示式為 null 的情況下輸出其他的樣式
@if 條件
同樣，也可以通過@else if 和@else 指令結合，進行多條件的判斷
1-4.27 @for
@for 指令在 sass 中用於重複處理一組指令
有兩種表現形式
@for $var from 《開始值》 through 《結束值》
@for $var from to
sass 教程
to 和 through 都是表示乙個區間，唯一的區別就是停止迴圈的地方不一樣。var
可以是任
意乙個變
量名稱如
var 可以是 任意乙個變數名稱如
var可以是
任意乙個
變數名稱
如i，和是 sass 表示式並且必須是整數
1-4.28 @each
@each 在 sass 中主要被用來進行列表或者對映資料的迴圈
主要表示形式：@each $var in
$var 可以是任意變數名稱，是 sass 表示式並且必須是 list
1-4.29 @while
@while 指令在 sass 中用於迴圈重複處理樣式，知道@while 表示式返回 false
sass 教程
1-4.30 使用者自定義函式——function
函式的功能主要是資料的運算，sass 中可以將一些值交給函式進行處理，具體的處理方式
由定義的函式具體的設計確定。
@function 函式名稱(引數列表)
1-4.31 警告 vs 錯誤
在自己設計的函式或者 mixin 中，可以包含一些警告或者錯誤提示資訊，使用者在錯誤使用
函式或者 mixin 時，就會看到這樣的錯誤提示。
@warn:警告資訊——會出現在命令列視窗中，編譯提示
@error:錯誤資訊——會出現在編譯後的 css 檔案中，錯誤提示
@warn message; 警告資訊，警告資訊一般會在執行 scss 程式生成 css 時觸發，所以
出現在命令列中。
@error message; 錯誤資訊，錯誤資訊直接顯示在編譯的 css 檔案中。
sass 教程
sass基礎語法
變數 width 300px 定義乙個變數 width width 使用定義的變數 str hello.jpeg background image url img str 使用 拼接 background image url img 使用 拼接資料型別 width 300px number div ...
SASS的基本語法
了解 sass sass是 css 的預編譯語言，可以把檔案編譯成 css 檔案。sass可以定義變數 可以定義函式 可以有 if 語句 可以有 for 迴圈語句，能使你敲 的速度的變得更高更快更強。sass 檔案 和 scss 檔案的區別 在 scss 檔案裡面和寫 css 的語法基本一致 在 s...
sass的高階語法
1.變數 sass允許使用變數，所有變數以 開頭 2.引用父元素 這裡 就代表是 a 3.繼承 這樣 class2 就 擁有了class1的所有屬性 4.可以重複使用的 塊 5.混入，呼叫可以重用的 塊 如果你用 mixin定義了 那麼呼叫需要使用 include 引用 6.計算 就是簡單的加減乘除...