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文件中使用字符串:

字符串 - www.yiibai.com

字符串使用示例

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文件,輸出如下得到顯示。

Sass數據類型

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提供類型在無效語法時,顏色插值到選擇其它輸出模式相同的輸出格式。要克服這個問題,使用顏色名稱在引號內。