scss值列表 SCSS筆記1 變數

2021-10-13 09:10:28 字數 1275 閱讀 8776

名詞解釋

li 包起來,表示這是個變數名。

字串變數

變數的值如果是字串,一定要用單引號引起來,儘管不引起來也不會出錯。單引號引起來是為了能一眼認出這是變數的值而且是字串值,而不是普通屬性的值。唯一例外是css中類似initial或sans-serif的識別符號無須引用起來。乙個最典型的例子:

$border-thickness: 'solid';

#sidebar {

border: 1px $border-thickness red;

數值變數

數值變數不必用引號引起來。

與css的最佳實踐不同,sass裡的0.5px不要簡寫成.5px。因為它隨時可能參與計算。

長度單位為0時,一定要省略單位,只寫0。時間單位為0時,一定要寫上單位。

算式應該被包含在括號裡,這是為了可讀性。

.foo {

width: (100% / 3);

數值變數可以進行簡單的加減乘除計算:

$left: 20px;

.div1{

margin-left: $left + 12px;

顏色值sass非常善於計算顏色值,所以,為了方便計算,要避免使用英文單詞的顏色值,比如red。如果一定要用英文單詞,請把英文單詞當做變數名,給它賦值顏色值。

最優先使用hsl表示法,其次是rgb表示法,最後是hex表示法。

列表(陣列)

$font-stack: ('helvetica', 'arial', sans-serif);

$font-stack: (

'helvetica',

'arial',

sans-serif,

列表去掉兩邊的括號,就跟字串變數一樣。

對映$breakpoints: (

'small': 767px,

'medium': 992px,

'large': 1200px,

應該遵循下述規範:

冒號(:)之後新增空格;

左開括號(()要和冒號 (:)寫在同一行;

如果鍵是字串(99% 都是字串),則使用引號包裹起來。

每乙個鍵值對單獨一行;

每乙個鍵值對以逗號(,)結尾;

為最後乙個鍵值對新增尾部逗號 (,),方便新增新鍵值對、刪除和重排已有鍵值對;

單獨一行書寫右閉括號 ())。

常量scss中並沒有真正的常量,我們用全大寫的變數名來模擬常量。

$css_positions: (top, right, bottom, left, center);

scss值列表 sass列表函式

join 函式是將兩個列表連線合併成乙個列表。join 10px 20px,30px 40px 10px 20px 30px 40px join blue,red abc,def 0000ff,ff0000,aabbcc,ddeeff join blue,red abc def 0000ff,ff0...

scss值列表 Sass each指令用法示例

sass each指令包含列表中每個專案的值。它也可用於多個分配以及帶有地圖的多個分配。簡單的 each指令 each指令具有多個分配 each指令具有多個分配和對映 在sass簡單的 each指令中,定義了乙個變數,該變數由列表中每個專案的值組成。句法 each var in 引數說明 var 它...

scss使用筆記

使用scss先要安裝ruby ruby v檢測是否安裝好 安裝scss gem install sasssass test.scss可以在視窗上顯示test.scss檔案轉化的css sass test.scss test.css將test.scss轉化成test.css儲存成檔案。sass wat...