数据类型是一个类型的信息,对于每一数据对象这需要声明数据类型。下表显示SassScript支持各种数据类型:
S.N. |
数据类型及说明
|
示例 |
---|---|---|
1 |
Numbers
它代表整数类型
|
2, 10.5 |
2 |
Strings
单或双引号中定义的字符序列
|
'zaixian', "zaixian" |
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.xuhuhu.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="zaixian">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
</div>
</body>
</html>
接下来,产生一个文件:style.scss.
style.scss
$name: "zaixian"; p.#{$name} { color: blue; }
你可以告诉SASS监视文件,并随时使用下面的命令更新SASS文件修改CSS:
sass --watch C:\Ruby22-x64\style.scss:style.css
接着执行上面的命令,它会自动创建style.css文件,下面的代码:
style.css
p.zaixian{ 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提供类型在无效语法时,颜色插值到选择其它输出模式相同的输出格式。要克服这个问题,使用颜色名称在引号内。