Sass的数据类型

Posted 2021-09-28 知否

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 值。