Sass - Script

Sass - 脚本

SassScript 是 Sass 文件中使用的脚本语言。它允许你动态计算值、操作数据，并为你的样式表添加逻辑。SassScript 表达式可用于属性值、变量赋值以及 Sass 指令，如 @if、@for、@each、@mixin 和 @function。

SassScript 的主要组成部分：

1. 变量 ($)

变量存储可重用的值。它们以 $ 符号开头。

$primary-color: #3498db;
$base-font-size: 16px;
$base-font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;

body {
  font-family: $base-font-stack;
  font-size: $base-font-size;
  color: darken($primary-color, 20%);
}

2. 数据类型

SassScript 支持几种数据类型：

• 数字： 整数 (10, 0, -5) 或小数 (1.5, 0.2)，可能带有单位 (10px, 1.5em, 80%, 2s)。Sass 理解单位并能用它们进行计算。
• 字符串： 字符序列。可以是带引号的 ("Hello", 'World') 或不带引号的 (bold, center)。带引号的字符串通常更安全，尤其是在包含空格或特殊字符时。使用插值 #{} 将表达式嵌入到带引号的字符串中。
• 颜色： 可以指定为十六进制代码 (#ff0000, #f00)、RGB (rgb(255, 0, 0))、RGBA (rgba(0, 0, 255, 0.5))、HSL (hsl(120, 100%, 50%))、HSLA (hsla(0, 100%, 50%, 0.8)) 或命名颜色 (red, blue)。
• 布尔值： true 或 false。
• Null： 表示空值或缺失值 (null)。在条件判断中计算结果为 false。
• 列表： 有序的值序列，用空格或逗号分隔。可以包含混合数据类型。示例：10px 20px 0 5px (空格分隔)，Helvetica, Arial, sans-serif (逗号分隔)。使用 sass:list 模块中的函数进行操作。
• Map： 键值对集合。键必须唯一，值可以是任意数据类型。示例：(key1: value1, 'key 2': value2, 3: value3)。使用 sass:map 模块中的函数进行操作。

3. 运算符

SassScript 支持各种运算符：

• 算术运算符： +、-、*、/、% (模运算)。作用于数字，并考虑单位。在现代 Sass 中，除法 / 可能需要括号或 math.div() 函数，以避免与 CSS 简写分隔符产生歧义。
• 比较运算符： == (等于)、!= (不等于)、<、<=、>、>=。作用于各种数据类型。
• 逻辑运算符： and、or、not。用于条件逻辑。
• 字符串连接： + 用于连接字符串。数字和其他类型在连接时通常会自动转换为不带引号的字符串。

$base-padding: 10px;
$double-padding: $base-padding * 2; // 20px
$font-size: 16px;
$line-height: $font-size * 1.5; // 24px

$is-large: $font-size > 14px; // true

.element {
  padding: $double-padding;
  line-height: $line-height;
  font-weight: if($is-large, bold, normal); // 'bold'
}

4. 括号 ()

用于控制复杂表达式中的运算顺序，就像在数学中一样。

width: (100% / 3) - 10px * 2;

5. 函数

Sass 提供了许多内置函数（组织在 sass:math、sass:color、sass:string 等模块中），并允许定义自定义函数 (@function)。函数接受参数并返回一个值。

@use 'sass:color';

$link-color: blue;

.link {
  color: $link-color;
  &:hover {
    color: color.adjust($link-color, $lightness: 15%); // Use built-in color function
  }
}

6. 插值 #{}

允许将 SassScript 表达式（通常是变量）的结果插入到选择器、属性名或带引号的字符串中。

$name: 'icon';
$property: 'border-radius';

.{$name}-user {
  #{$property}: 5px;
  background-image: url("/images/#{$name}.png");
}

7. SassScript 中的父选择器 &

虽然主要用于选择器中，但 & 有时也可用于 SassScript 中（尽管不太常见），如果你需要操作当前的父选择器字符串。函数如 selector.append() 或 selector.nest() 常用于此目的。

8. 变量默认值 (!default)

仅当变量尚未赋值或为 null 时才为其赋予一个值。这对于创建可配置的库或框架至关重要。

$user-font-size: 18px;

// 库默认值
$base-font-size: 16px !default;

body {
  // $base-font-size 保持 16px，因为它已被定义
  font-size: $base-font-size;
}

// 如果上面没有定义 $user-font-size，这里 $base-font-size 将变为 18px。
$base-font-size: $user-font-size !default;

SassScript 提供了动态能力，使 Sass 成为一个强大的预处理器，能够以编程方式生成 CSS。