Sass数据类型

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

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

接下来,产生一个文件:style.scss.

style.scss

$name: "e-learn";

p.#{$name} {
  color: blue;
}
你可以告诉SASS监视文件,并随时使用下面的命令更新SASS文件修改CSS:
sass --watch C:\Ruby22-x64\style.scss:style.css
接着执行上面的命令,它会自动创建style.css文件,下面的代码:

style.css

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