scss值列表_Sass数据类型

数据类型是一个类型的信息，对于每一数据对象这需要声明数据类型。下表显示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文件中使用字符串：

字符串 - www.yiibai.com

字符串使用示例

Sass is an extension of CSS that adds power and elegance to the basic language.

接下来，产生一个文件：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提供类型在无效语法时，颜色插值到选择其它输出模式相同的输出格式。要克服这个问题，使用颜色名称在引号内。

¥ 我要打赏

纠错/补充

收藏

加QQ群啦，易百教程官方技术学习群

注意：建议每个人选自己的技术方向加群，同一个QQ最多限加 3 个群。