目錄
0x00 default 預設值 與內建變數
0x01 內建變數
0x02 內建模組別名
0x03 變數的作用域
#css規則**段
#流程控制**段
0x04 高階變數功能
#變數判斷函式
#從物件中取值
0x05插值使用：
$width:15px;
$width:25px!default;
@debug $width;
內建變數就是系統內建模組中的變數
例如：數學模組
@use "sass:math";
@debug math.$pi;
寫法一：
@use "sass:math" as m;
@debug m.$pi;
@use "sass:math" as *;
@debug $pi;
大部分語言的作用域 是因為函式**段的產生而產生的。
能通用的說法是：作用域因**段花括號的產生而產生
sass中變數的作用域的有兩種不同模式的**段可以影響到變數的區域性和全域性
1.能夠輸出css樣式的**段
例如：mixin區塊，css規則區塊、function區塊、%佔位規則可以影響變數作用域
2.流程控制**段
if、each、for、while
1.全域性變數 在 花括號中 仍然適用
證明：
$a:10
body
即區域性作用域中區域性變數覆蓋同名全域性變數，但是無法影響到花括號外
證明：
$a:10;
除非將區域性變數強制宣告為全域性變數
$a:10;
body
@debug $a;
!global 宣告的區域性變數必須在外部定義過
不能用！global來直接定義變數。
例如:可以這樣寫：
$a:null;
body
@debug $a;
流程控制**段裡面如果定義了乙個和外面同名的變數則會影響到外面
證明：
$a:10;
注意，必須先定義外面的全域性變數
如果沒有定義外邊的全域性變數，在裡面直接定義變數，則只能在裡面訪問
這個變數，如果在外面訪問該變數則會報錯
錯誤寫法：
總結：外邊有變數，裡面的同名變數會影響外邊
外邊沒有變數，裡面的變數只能在裡面使用，不能在外邊使用
1.meta.variable-exists()
判斷變數是否存在
2.meta.global_variable-exists()
判斷全域性變數是否存在
@use "sass:meta";
$a:10;
@debug meta.variable-exists("b");
map.get(物件，屬性)
@use "sass:map";
$theme-color:(
"success":#28a745,
"info":#17a2b8,
"warning":#ffc107,
);.alert
這是一種語言設計的思維：讓變數的使用更加明顯和好區分,為了避免不好維護，
所以沒有涉及 $theme-color-#
1.用在css選擇器上
.img-#:$color;
3.用在值上面
.img-red;
}
body
3.並且雙引號中的變數只有加上插值才會被作為變數解析：
證明：
$color:"red";
body";
font-size:"i don't like "+$color;
}
body
注意：
雖然可以用插值表示式來將帶引號的字串轉化為不帶引號的字串
但是使用string.unquote()函式要清晰的多，而不是#
建議寫成string.unquote($string)
@use "sass:string";
$name:"15px";
body
Sass 變數預設 default
如果分配給變數的值後面新增了 default 標誌 這意味著該變數如果已經賦值，那麼它不會被重新賦值，但是，如果它尚未賦值，那麼它會被賦予新的給定值。如果在此之前變數已經賦值，那就不使用預設值，如果沒有賦值，則使用預設值。如果變數之前沒有賦值，則使用預設值 如果之前沒有賦值,則使用預設值 const...
sass mysql 總結Sass 變數
sass 英文全稱 syntactically awesome stylesheets 是乙個最初由 hampton catlin 設計並由 natalie weizenbaum 開發的層疊樣式表語言。變數用於儲存一些資訊，它可以重複使用。sass 變數可以儲存以下資訊 字串數字 顏色值布林值 列表...
sass高階 變數運算
變數操作 兩個變數之間的運算子需要用空格隔開，否則會報錯。width1 50px width2 100px body 連字符號中間使用帶空格的加號效果不變 a hover 注意 說明運算時sass只關注運算子前後兩個用空格隔開的值，其餘的都不管原樣輸出 層級關係 雙引號權重最大，沒有引號其次，單引號...