SASS 支持哪些数据类型？

Sass 是一种 CSS 预处理器脚本语言。在这里，我们不需要混淆 Sass 和 Scss，它们是相同的东西，但 Sass 在 CSS3 之前和 CSS3 之后拥有更旧的语法，它被称为 SCSS。与所有其他编程语言一样，Sass 也包含用于处理正在使用的不同类型数据的数据类型。然而，Sass 不是一种标准的编程语言，但它确实包含数据类型。在本文中，我们将研究 Sass 中使用的所有可用数据类型，并寻找一些用例。如果您对 SASS 不了解，请参阅 SASS 介绍 & SASS 全文文章。
Sass 共包含 7 种数据类型：

数字
布尔值
列表
地图
空值
细绳
颜色

让我们按顺序讨论每种数据类型。

Numbers： Sass 将 Number 视为整数和实数在一起，在使用时，它会识别正在使用哪些值。有一些标准单位用作 px（像素单位）或 em（临时单位）。为了对数字执行操作，我们必须确保使用相同的单位，否则会引发一些错误。

例子：

$len: 10;
$wid: 20.5;

.main{
    height: 10px + 10; // It is valid
    width: 20px - 5; // It is valid
}

.box0{
    height: 10px + $len; // Valid
    height: 10em + $wid; // Valid
}

.box{
    height: 10em + 10em; // It is valid
    width: 10px + 10em; // Error
}

Booleans： Sass 也有 Booleans 数据类型，Boolean 有两个值，它可以是真或假。为了使用布尔值，它提供了三个基本运算符，即与、或与非。请注意，我们使用小写字母作为运算符，因为大写字母在 Sass 中将被视为字符串。

and：如果两个值都为真，则返回真值，否则返回假值。

@debug true and true; // Returns true value

或：如果两个值中的一个为真，或者两个值都为真，则返回真值；如果两个值都为假，则返回假。

@debug true or false; // Returns true value
@debug false or false; // Returns false value

not：返回当前存在值的否定值。

@debug not true; // Returns false value
@debug not false; // Returns true value

列表： Sass 支持列表数据类型，该数据类型基本上用于表示由空格或逗号分隔的一系列值。请注意，如果在列表中使用单个值，它将被视为有效列表。

例子：

$number-list: 10, 23, 10; // Separated by commas.
$number-list2: 10px 20px 30px; // Separated by spaces.

我们也可以使用嵌套列表。在这种情况下，我们将使用用逗号和空格分隔的两种类型的值，如下例所示。

$number-list3: 10, 20 30, 10; // Nested list.
$number-list4: 10, (20 30), 10; // Nested list same as $number-list3.

还有一种情况，列表可以为空。

$empty-list: ();

Maps： Sass 中的 Maps 基本上是键值对。这些对必须用逗号分隔，并且所有对必须用括号括起来。

$new-map: (primary: #fdfdfd, secondary: $fff, background: #f1f1f1);

为了在 Sass 中使用 Maps，我们不能直接使用它们。但是，sass 中有一些可用的功能，借助它，我们可以检索映射的值并在需要的地方使用它。这些是一些功能： -

地图获取
地图合并
地图键
地图有键
地图移除
地图值

Null： null 数据类型只包含一个值，基本上被称为 nothing 或 unknown，它表示为 small cased null。正如我们所看到的，一些数据类型有一些函数和运算符，但对于 null，Sass 中没有任何运算符和函数可用。

$primary-color: null;

请注意，如果任何变量被初始化为 null 并且如果我们尝试使用该变量，那么它将在编译时被忽略，并且不会考虑该特定变量。

字符串：字符串是有序的字符序列，可以用双引号或单引号表示，也可以不加引号。这里有一些例子可以让我们对字符串的看法一目了然。

$color: blue;
$font-family: 'Courier New', Courier, monospace;
$heading: "Welcome";

在 Sass 中我们还需要了解一件事。有一个插值的概念，用于将变量传递给选择器。其语法由#{} 表示。当我们使用插值时，引用的字符串会从该引号中展开，如示例所示。

$heading: "GeeksforGeeks";

h2.#{$heading} {
  color: green;
}

在下面的代码中，我们可以看到上面用于插值的 Sass 代码的 CSS 代码。

h2.GeeksforGeeks {
 color: green;
}

颜色： Sass 支持颜色作为数据类型，因为它用于定义颜色值。在这里，我们可以看到在常规 CSS 中使用的相同颜色表达式。

RGB（红、绿、蓝）：

$primary: rgb(214,121,45);

RGBA（红、绿、蓝、阿尔法）：

Alpha 用于透明度，其值从 0.0 到 1.0 不等，其中 0 是完全透明的，1.0 是完全不透明的。

$color: rgba(210, 122, 54, 0.5)

HSL（色相、饱和度、亮度）：

此表达式包含一些不同于常规颜色的参数。

$color: hsl(0, 0%, 100%);

色调可以被认为是在色轮中表示的纯色，可以通过从 0 到 360 的值进行选择，其中每个值包含略微不同的颜色。
饱和随着颜色值的百分比增加，对颜色应用阴影。在 0% 时，颜色看起来会褪色，随着值的增加，颜色会变成最纯净的形式。
亮度将光层应用于颜色。它的值从 0 到 100% 不等，在 0 时使颜色完全变暗，在 100% 时完全变白。

HSLA（色相、饱和度、亮度、Alpha）：

$color: hsla(100, 60%, 60%, 0.7)

在这里，alpha 再次用于透明度，其值从 0.0（透明）到 1.0（不透明）不等。