Sass的数据类型
Sass 语言中支持的数据类型有下面几种:
- numbers:表示整数类型。
-
strings:在单引号
''
或双引号""
内定义的字符序列。 -
booleans:布尔类型,有
true
和false
两个值。 - colors:用于定义颜色值。
- nulls:指定空值,是未知数据。
- lists:值列表类型,表示由空格或逗号分隔的值。
- maps:从一个值映射到另一个值。
numbers 类型
数字在 CSS 中应用的很广泛,大多数都是结合单位一起使用的,但是在技术上依然算是数字。例如字体大小、长高、外边距内边距等。Sass 中也有数字(numbers )类型,数字类型的值可以做一些加减乘除的运算。
示例:
例如定义一个变量 $num
,给这个变量赋一个数字类型的值:
$num:24px;
.xkd{
font-size: $num - 4;
padding: $num + 6px;
width: $num * 5;
border-radius: $num / 6;
}
编译成 CSS 代码:
.xkd {
font-size: 20px;
padding: 30px;
width: 120px;
border-radius: 4px;
}
上述代码中,我们可以对这个变量进行加减乘除运算。但是需要注意,在使用数字类型进行计算时,如果值的单位不兼容会导致报错,例如 12px + 2em
,执行代码后会报错 Error: Incompatible units: 'em' and 'px'.
,告诉我们单位不兼容。
string 类型
Sass 中的字符串可以使用单引号 ''
或者双引号 ""
包围,例如 "hello"
或 'hello'
,即使包围的是一个空格,也算是字符串。字符串也可以不使用引号包围,例如 hello
,也表示一个字符串。
示例:
我们定义一个字符串类型的变量:
$msg:"hello";
.one{
content: $msg;
.two{
content: $msg + ' ' + summer;
}
}
编译成 CSS 代码:
.one {
content: "hello";
}
.one .two {
content: "hello summer";
}
booleans 类型
booleans
类型为布尔类型,此类型只有两个值,即 true
和 false
。在 Sass 中,只有当值为 false
或者 null
时,才会返回 false
。其他的一切值都会返回 true
。
示例:
.one{
a:type-of(true);
b:type-of(false);
c:type-of(10);
d:type-of(null);
}
编译成 CSS 代码:
.one {
a: bool;
b: bool;
c: number;
d: null;
}
上述代码中的 type-of()
函数用于检测一个值的数据类型,可以看到只有 true
和 false
两个值的数据类型为布尔值。
color 类型
Sass 中的 color
类型表示颜色类型,可以包括所有的颜色值,例如十六进制颜色值、颜色名称、rgb
、rgba
、hsl
、hsla
等。
示例:
$color1:pink;
.one{
color: $color1;
background-color: $color1 + blue;
}
编译成 CSS 代码:
.one {
color: pink;
background-color: #ffc0ff;
}
从上述代码中可以看出,颜色值也是可以计算的,在进行计算时会先将颜色值转换为十六进制值,然后进行计算。
nulls类型
null
类型是 Sass 中最基本的数据类型,表示一个空值,也就是说没有任何值。虽然说 null
表示什么都没有,但是当我们使用 length()
函数返回长度时,返回值为1。这是因为null
仍然表示的是一个真实存在的实体,只不过它不代表任何值。
示例:
$var:null;
.one{
type: type-of($var);
length:length($var);
}
编译成 CSS 代码:
.one {
type: null;
length: 1;
}
lists类型
Sass 中的列表类型是由空格或者逗号分隔的一系列的值。
示例:
$padding: 10px 20px 30px 40px;
$font:Arial,sans-serif,Helvetica;
.one{
padding: $padding;
font-family: $font;
}
编译成 CSS 代码:
.one {
padding: 10px 20px 30px 40px;
font-family: Arial, sans-serif, Helvetica;
}
列表中除了可以包含简单的值,还可以嵌套列表,例如下面这个列表就表示含有三个值,而不是四个值:
$list: 1, 2 100, 3;
等同于:
$list: 1, (2 100), 3;
maps类型
在 Sass 中,maps
类型表示映射类型。常以键值对(key/value)的形式出现。在定义映射时,整个映射必须通过小括号()
括起来,值与值之间使用逗号分隔。
在 maps
中,一个给定的 key
只能有一个相关的 value
,但一个给定的 value
可以被映射到许多不同的 key
上。 value
值可以是任何数据类型,包括 maps
。
示例:
$color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb);
.one{
color: map-get($color-map,color1);
background-color: map-get($color-map, color2);
}
编译成 CSS 代码:
.one {
color: #fa0000;
background-color: #fbe200;
}
上述代码中,创建了一个名为 $color-map
的映射,这个映射中有三个键值对,分别为不同的 CSS 颜色值。其中 map-get
函数用于提供映射的值,可以接受两个参数,第一个参数为映射名称,第二个参数为需要取的 key
值。