玩转Sass：掌握数据类型！

当我们在进行前端开发的时候有时候需要使用一些不同的数据类型来处理样式Sass 提供的这些数据类型可以帮助我们更高效地进行样式开发本篇文章将为您详细介绍 Sass 中的数据类型。

布尔类型

在 Sass 中布尔数据类型可以表示逻辑值 true 和 false。在编写样式表时下面这些值都会被解析为 false

$bool: false;
$zero: 0;
$null: null;
$unary: -10px + 10px; // 0
而下面这些值则会被解析为 true

$bool: true;
$int: 1;
$float: 1.0;
$str: "fizz";
$map: (key: value);
$color: #000;
$list: (1, 2, 3);
可以使用 not 和 if 等 Sass 内置函数对布尔值进行操作。例如

$bool: false;

@if not $bool {
  color: red;
}

// 实际输出color: red;

数字类型

在 Sass 中数字数据类型支持整型integers和浮点数floats。这两种类型的数值可以进行基本的多种数学运算。

$num: 1;
$num: $num + 1; // 2
$num: $num * 2; // 4
$num: $num / 2; // 2
同时数字类型还可以与单位进行组合例如

$size: 4px;
$width: 2 * $size; // 8px
$height: $width / $size; // 2
在 Sass 中还可以使用单位转换函数 unit() 来实现单位之间的转换

$size: 12px;
$size-in-ems: $size / 1em; // 0.75em

字符串类型

在 Sass 中字符串数据类型表示一段文本可以用引号单引号或双引号括起来。字符串类型支持字符串拼接、获取字符串长度、查找子字符串等常见操作。

$name: "rebs"; 
$hobby: 'programing';

$text1: $name + ' likes ' + $hobby + '.'; // "rebs likes programming."
$text2: length($text1); // 26
$sub-str: str-slice($text1, 6, 9); // "likes"

颜色类型

Sass 中颜色数据类型可以表示 RGB、HSL、十六进制颜色值。代表颜色的值可以进行操作例如获取颜色通道、修改颜色通道、混合颜色等。

$color1: #000;
$color2: rgb(255,0,0);
$color3: hsla(120, 100%, 50%, 0.9);

$alpha: opacity($color1); // 1

$blue: blue($color2); // 0
$red-added-10: red($color2) + 10; // 265

$mix-color: mix($color2, $color3, 50%); // #7F007F

列表类型

列表数据类型可以用于存储任意数量的其他值并且这些值不一定是同一种类型。在 Sass 中列表的元素可以是任意数据类型包括另一个列表。

$list1: 1, 2, 3, "foo"; // (1, 2, 3, "foo")
$list2: ($list1, "bar"); // (1, 2, 3, "foo", "bar")

$first-item: nth($list1, 1); // 1
$last-item: nth($list1, -1); // "foo"

$len: length($list2); // 5
$merged-list: join($list1, $list2, $separator:comma); // (1, 2,

Null 类型

在 Sass 中除了常见的数据类型之外还有一个特殊的数据类型是 null。null 表示缺少值或未定义的值。

$null-value: null;

@if $null-value == null {
  content: "This value is null";
}

// 输出content: "This value is null";
当某些变量没有赋值时它们的默认值就是 null。例如

$unassigned-variable: null;

@if $unassigned-variable == null {
  content: "This variable is not assigned";
}

// 输出content: "This variable is not assigned";

使用 null 可以方便地判断变量是否已经被赋值以及进行逻辑操作。