css scss sass less 变量的写法

CSS、SCSS、Sass 和 Less 都是用于编写 CSS 的预处理器语言，它们引入了变量（也称为“变量”或“混入”）的概念，使得代码更具复用性和一致性。

**1. CSS（原生）**: CSS 变量的写法从 CSS4 开始支持，通过 `--` 符号声明和引用变量，例如：

:root {
  --primary-color: #007BFF;
}
.button {
  color: var(--primary-color);
}

在样式中使用 `var()` 函数来引用变量。

**2. SCSS (Sassy CSS)**: SCSS 允许你使用 `$` 符号定义变量，并在需要的地方使用它。示例：

$primary-color: #007BFF;

.button {
  color: $primary-color;
}

通过 `@import` 或者 `sass` 编译器将 SCSS 转换为 CSS。

**3. Sass (Syntactically Awesome Style Sheets)**: 这里有两种常用的语法，`indented`（默认）和 `expanded`。变量写法类似 SCSS：
- Indented:

$primary-color: #007BFF;

.button {
  color: $primary-color;
}

- Expanded:

$primary-color: #007BFF;
button {
  color: $primary-color;
}

同样需要通过编译器如 `compass`, `node-sass`等转换为 CSS。

**4. Less**: 在 Less 中，变量使用 `@` 符号定义，示例：

@primary-color: #007BFF;

.button {
  color: @primary-color;
}

然后用命令行工具如 `lessc` 进行编译。