sass的变量和运算符

变量

前面我们比较粗略地了解了一些sass 的变量，这里我们看一点细节。

输出变量

在sass中有多种方式可以输出变量的值或者表达式的结果。

直接生成 css 文件，在 css 文件中查看
使用 @debug 在开发者工具的控制台输出变量值
在终端中输入 sass -i 启动 Sass 的交互式模式。

数据类型

在Sass中，变量可以保存各种类型的数据。变量可以是以下任何数据类型：

number（数字）: 包括整数和浮点数。比如 10, 3.14, 5px, 2em。处理函数可参考math模块。
string（字符串）: 由字符组成的文本。可以是单引号或双引号包着，也可以不用引号包着。比如 'Hello', "World", 'Arial', "sans-serif"，hello(使用的时候需谨慎，可能是其它类型)。
color（颜色）: 表示颜色值。可以是命名颜色、十六进制、RGB、RGBA、HSL、HSLA等表示。比如 blue, #FF0000, rgb(255, 0, 0), hsl(120, 100%, 50%)。
bool（布尔值）: 只有两个取值：true和false。
list（列表）: 用逗号或者空格分隔的值的有序集合，可以是混合类型。比如 1px solid black, 10px, 20px, 30px, (Helvetica, Arial, sans-serif)。
map: 键值对的集合，允许将一个值与一个键关联起来。比如 ('key': 'value'), ('primary-color': #3498db, 'secondary-color': #2ecc71)。
null（空值）: 表示没有值。比如 null。
函数：可以将函数赋值给变量。

插值（Interpolation）

插值（Interpolation）是一种在字符串中嵌入变量或表达式的方式。它使用 #{} 语法将变量或表达式嵌入到字符串中。

$year: '一万年';
$str: '热爱祖国，热爱人民#{$year}'; // 结果是："热爱祖国，热爱人民一万年"

可以编写表达式：

$year: 10000;
$str: '热爱祖国，热爱人民#{$year * 5}年';

默认值

!default 是 Sass 中用于设定变量默认值的关键字。当你在定义一个变量时，在变量值的末尾使用 !default，表示它前面的值是这个变量的默认值，在该变量未被赋值或者被赋值为 null 时会使用该默认值。

$primary-color: #3498db !default;

运算符(操作符)

运算符是指变量参与运算时用的符号。Sass 支持的运算符有：

算术运算符：+, -, *, /, %
比较运算符：<, <=, >, >=,==, !=
逻辑运算符：and, or, not
字符串拼接运算符：+, -, /

运算符的结合性和优先级，与其它编程语言的基本一样。比如：JavaScript。如果你实在是记不住优先级，还可以通过() 还调整优先级。

相等的意义

number 类型比较时，具有相同的值和相同的单位，或者当它们的单位在彼此之间转换时，它们的值是相等的，则返回 true
```
1px == 1     // false
1px == 1px   // true
1000ms == 1s // true
```

string 有引号和无引号的字符串如果字符内容相等，则返回 true

abc == abc     // true
abc == 'abc'   // true
"abc" == 'abc' // true

color 值比较时，只要 rgba 四个值都是相等的，则返回 true

#000 == rgb(0,0,0)      // true
#F00 == rgb(255,0,0)    // true
#F00 == hsl(0,100%,50%) // true

list 比较时，如果内容相等，则返回 true 。逗号分隔和空格分隔的列表不相等，括起来的列表不等于不括起来的列表。

(2px 3px 4px) == (2px 3px 4px)      // true
(2px 3px 4px) == (2px 4px 3px)      // false
(2px 3px 4px) == (2px,3px,4px)      // false

Map 比较时，如果 key 和 value 都相等，则返回 true 。

(name: '如花',age:18) == (age:18, name:'如花')          // true
(name: '如花',age:18) == (name:'如花',age:18,sex:'男')  // false

true, false, null 只和他们自身的值相等。

运算符单位问题

单位不兼容的一般不能放在一起运算，有可能会报错

1000ms == 1px  // 不报错，结果为false
1000ms > 1px	 // 直接报错
1000ms + 1px	 // 直接报错

无单位的数字可以和有单位的进行运算，最后单位以有单位的为准
```
1000ms + 1      // 1001ms
1000 + 1px      // 1001px
```
两个都有单位，且单位可以相互转换，以前面的单位为准
```
1000ms + 1s     // 2000ms
1s + 1002ms     // 2s
```

`/` 的说明

CSS 有一些属性支持使用斜线 / 将一些值分隔开。同时，在我们平时的数学计算的时候，/ 也代表除号。默认情况下 / 表示分隔符，而不是除号，如果放到括号里连接两个数字时表示除号。

附加内容

颜色

在css中有多种方式表示颜色，比如：命名颜色、十六进制、RGB、RGBA、HSL、HSLA。前几种咱们都比较熟悉，HSL和HSLA可能有的同学不太清楚，这里简单说一下：

HSL 是色相（Hue）、饱和度（Saturation）、明度（Lightness）的缩写。HSL模型以人类感知的方式描述颜色，相对于RGB模型，HSL更容易理解和控制颜色。通过调整色相、饱和度和明度，可以精确地控制和调整颜色的外观。

色相（Hue）：
- 色相指的是颜色在色谱中的位置(色相环中的角度)。它表示了颜色在光谱中所处的位置，比如红色、蓝色、绿色等。色相是色彩的基本属性，它决定了颜色是什么颜色。
饱和度（Saturation）：
- 饱和度指的是颜色的纯度或者说是鲜艳程度。它表示了颜色的强度或深浅程度。饱和度越高，颜色越纯净鲜艳；饱和度越低，颜色越灰暗、接近灰色。
明度（Lightness）：
- 明度指的是颜色的明暗程度。它表示了颜色相对于灰色的轻重程度。明度高的颜色看起来更亮更明亮，而明度低的颜色则更暗或更深。

CSS中的hsl()和hsla()函数：

color: hsl(120, 100%, 50%); /* 色相: 120度（绿色）, 饱和度: 100%, 明度: 50% */

第一个参数是色相，取值范围是 0 到 360 度，表示在色相环中的角度。
第二个参数是饱和度，取值范围是 0% 到 100%，表示颜色的纯度。
第三个参数是明度，取值范围是 0% 到 100%，表示颜色的明亮程度。

hsla() 函数，还可以添加第四个参数表示透明度（alpha）值，用来定义颜色的不透明度。

/* 使用hsla()函数表示颜色，包括透明度 */
color: hsla(120, 100%, 50%, 0.7); /* 0.7表示70%不透明度 */

变量