Sass數據類型
數據類型是一個類型的信息,對於每一數據對象這需要聲明數據類型。下表顯示SassScript支持各種數據類型:
S.N.
數據類型及說明
示例
1
Numbers
它代表整數類型
2, 10.5
2
Strings
單或雙引號中定義的字符序列
'Yiibai', "yiibai"
3
Colors
用於定義顏色值
red, #008000, rgb(25,255,204)
4
Booleans
布爾類型返回true或false
10 > 9 指示爲 true
5
Nulls
它指定爲空值,未知的數據
if(val==null) {//statements}
6
Space and Comm
表示由空格或逗號分隔值
1px solid #eeeeee, 0 0 0 1px
7
Mapping
它從一個值 映射到另一個值
FirsyKey: frstvalue, SecondKey: secvalue
字符串
字符串是一系列單或雙引號字符。用單引號或雙引號定義的字符串將通過使用#{}插補(選擇使用變量的一種方式)被顯示爲不帶引號的字符串值。
示例
下面的例子演示了在SCSS文件中使用字符串:
字符串使用示例
Sass is an extension of CSS that adds power and elegance to the basic language.
接下來,產生一個文件:style.scss.
style.scss
$name: "yiibai";
p.#{$name} {
color: blue;
}
你可以告訴SASS監視文件,並隨時使用下面的命令更新SASS文件修改CSS:
sass --watch C:\Ruby22-x64\style.scss:style.css
接着執行上面的命令,它會自動創建style.css文件,下面的代碼:
style.css
p.yiibai{
color: blue;
}
輸出結果
讓我們來執行以下步驟,看看上面的代碼執行結果:
保存上述的HTML代碼到strings.html文件。
在瀏覽器中打開該HTML文件,輸出如下得到顯示。
Lists
列表指定使用空格或逗號,甚至單個值分隔的多個值被視爲一個列表。Sass使用了一些的列表的功能,如:
nth 函數: 它提供了列表的特定的項目
join 函數: 它將多個列表加入成爲一個列表
append 函數: 追加的項目到列表的另一端
@each 指令: 它提供列表中每個項目的樣式
例如,考慮有兩種類型的列表;第一個列表包含了使用逗號分隔如下列值。
10px 11px, 15px 16px
如果內部列表和外部列表擁有相同的分隔符,那麼可以用括號來指定兩份列表的開始和結束。可以指定列表如下圖所示:
{10px 11px} {15px 16px}
Maps
映射是那些鍵用來表示鍵和值的組合。映射定義值成組,並且可以被動態訪問。映射表達式可以寫爲:
$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);
它使用的一些功能,如:
map-get: 提供映射的值。
map-merge: 它增加值到映射中
@each directive: 它規定了鍵/值對映射的樣式
映射沒有任何元素表示空鍵/值對 ( ) ,使用inspect($value)函數來顯示輸出映射。
Colors
它是用於定義SassScript顏色值。例如,如果正在使用顏色代碼爲#ffa500,那麼它將會顯示爲橙色壓縮模式。Sass提供類型在無效語法時,顏色插值到選擇其它輸出模式相同的輸出格式。要克服這個問題,使用顏色名稱在引號內。