Sass - 資料型別

資料型別

資料型別是一種資訊型別，需要為每個資料物件宣告資料型別。下表顯示了 SassScript 支援的各種資料型別：

序號	資料型別和描述	示例
1	數字表示整數型別。	2, 10.5
2	字串是用單引號或雙引號定義的字元序列。	'Tutorialspoint', "Tutorialspoint"
3	顏色用於定義顏色值。	red, #008000, rgb(25,255,204)
4	布林值返回 true 或 false 布林型別。	10 > 9 表示 true
5	空值指定未知資料的空值。	if(val==null) {//語句}
6	空格和逗號表示用空格或逗號分隔的值。	1px solid #eeeeee, 0 0 0 1px
7	對映它將一個值對映到另一個值。	FirsyKey: frstvalue, SecondKey: secvalue

字串

字串是一系列字元，用單引號或雙引號表示。使用#{ }插值（一種在選擇器中使用變數的方法），用單引號或雙引號定義的字串將顯示為無引號的字串值。

示例

下面的示例演示了在 SCSS 檔案中使用字串：

<html>
   <head>
      <title>Strings</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>Example using Strings</h2>
         <p class = "tutorialspoint">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

接下來，建立檔案style.scss。

style.scss

$name: "tutorialspoint";

p.#{$name} {
   color: blue;
}

您可以告訴 Sass 監視檔案並在 Sass 檔案更改時更新 CSS，方法是使用以下命令：

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來，執行上述命令；它將自動建立包含以下程式碼的style.css檔案：

style.css

p.tutorialspoint {
   color: blue;
}

輸出

讓我們執行以下步驟來檢視上述程式碼的工作方式：

將上述 HTML 程式碼儲存在strings.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

列表

列表指定多個用空格或逗號分隔的值。即使是單個值也被視為列表。

Sass 使用一些列表函式，例如：

nth 函式 - 提供列表的特定項。
join 函式 - 將多個列表連線成一個。
append 函式 - 將專案附加到列表的另一端。
@each 指令 - 為列表中的每個專案提供樣式。

例如，假設有兩種型別的列表；第一個列表包含以下用逗號分隔的值。

10px 11px, 15px 16px

如果內部列表和外部列表具有相同的分隔符，則可以使用括號來指定兩個列表的起始和結束位置。您可以按如下所示指定這些列表：

{10px 11px} {15px 16px}

對映

對映是鍵和值的組合，其中鍵用於表示值。對映將值定義為組，並且可以動態訪問。您可以編寫對映表示式為：

$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);

它使用一些函式，例如：

map-get - 提供對映的值。
map-merge - 向對映新增值。
@each 指令 - 為對映中的鍵/值對指定樣式。

對映表示空鍵/值對為( )，沒有任何元素，並使用inspect ($value)函式顯示對映的輸出。

顏色

它用於定義 SassScript 顏色值。例如，如果您使用顏色程式碼#ffa500，則它將在壓縮模式下顯示為orange顏色。Sass 在其他輸出模式下提供與鍵入相同的輸出格式，當顏色被插入到選擇器中時，這將成為無效的語法。為了克服這個問題，請在引號內使用顏色名稱。

sass_script.htm

列印頁面