Sass資料型別 - tw511教學網

資料型別是一個型別的資訊，對於每一資料物件這需要宣告資料型別。下表顯示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檔案中使用字串：

<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>字串 - www.tw511.com</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <h2>字串使用範例</h2>
   <p class="yiibai">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
   </div>
</body>
</html>

接下來，產生一個檔案：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提供型別在無效語法時，顏色插值到選擇其它輸出模式相同的輸出格式。要克服這個問題，使用顏色名稱在引號內。