Sass数据类型

数据类型是一个类型的信息，对于每一数据对象这需要声明数据类型。下表显示SassScript支持各种数据类型：

S.N.	数据类型及说明	示例
1	Numbers 它代表整数类型	2, 10.5
2	Strings 单或双引号中定义的字符序列	'BootWiki', "bootwiki"
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.bootwiki.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="bootwiki">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
   </div>
</body>
</html>

接下来，产生一个文件：style.scss.

style.scss

$name: "bootwiki";

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

你可以告诉SASS监视文件，并随时使用下面的命令更新SASS文件修改CSS：

sass --watch C:Ruby22-x64style.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提供类型在无效语法时，颜色插值到选择其它输出模式相同的输出格式。要克服这个问题，使用颜色名称在引号内。