变量

约 1470 字大约 5 分钟

2025-04-17

stylus 变量是一个可以存储值的标识符，类似于 JavaScript 中的变量。变量可以存储任何类型的值，包括数字、字符串、颜色、表达式、函数等。

一、变量的定义

变量的定义使用 = 符号，其形式如下：

变量名 = 值

例如：

$font-size = 14px
$color = #f00

body
  font-size $font-size
  color $color

编译为：

body {
  font-size: 14px;
  color: #f00;
}

二、命名规范和建议

变量的命名规则，我们可以参考 JavaScript，主要包括以下几个方面：

变量名应该是有意义的，能够清晰的表达变量的用途和含义
变量名必须以字母、下划线 _ 或 $ 开头
变量名可以包含字母、数字、下划线 _ 或 $，不能包含空格或特殊字符
变量名区分大小写，例如 FontSize 和 fontsize 是两个不同的变量
变量名不能使用关键字和保留字作为变量名

工作实践中的建议

在实际开发中，我们可以根据项目的需求和团队的约定来定义变量名。一般来说，为了提高代码的可读性和可维护性，我们建议遵循以下命名规范：

遵循 BEM 命名规范，使用短横线 - 和下划线 _ 分隔单词。例如：$block__element--modifier
强烈建议使用 $ 开头，这样我们可以很容易区分变量和关键词。例如：$font-size 和 font-size。
常量建议使用全大写字母，单词之间使用下划线 _ 分隔。例如：$FONT_SIZE, $COLOR_PRIMARY
全局变量建议使用 $global- 或者其他具有明显意义的单词作为前缀。例如：$global-font-size、$theme-color-primary、$button-color
按照模块将变量分组，可以使用特定前缀或哈希对象配合注释说明，也可以将变量拆分到不用文件中，以提高代码的可读性和可维护性。例如：variables.styl，variables-theme.styl，variables-button.styl

三、值的类型

变量的值可以是任何类型的值，包括数字、字符串、颜色、哈希对象、表达式、函数等。

例如：

// 字符串
$font-size = 14px
// 字符串、列表
$font-stack = "Lucida Grande", Arial, sans-serif
// 颜色
$color = #f00
// 数字
$dialog-z-index = 999
// Hash对象
$theme-config = {
  theme: 'light',
  font-color: #333,
  fontSize: $font-size,
}
body
  color $theme-config.font-color
  font $font-size $font-stack
  a
    color $color
  #dialog
    z-index $dialog-z-index

编译为：

body {
  color: #333;
  font: 14px "Lucida Grande", Arial, sans-serif;
}
body a {
  color: #f00;
}
body #dialog {
  z-index: 999;
}

但是变量不能是一个键值对。例如：

$theme-config = "margin 15px"
body
  $theme-config 20px

编译为：

body {
  $theme-config: 20px;
}

四、特性

1、块级作用域（局部变量）

stylus 支持块级作用域，即变量只在当前块内有效，不会影响到其他块。

一般常见的块级作用域有：函数、混入、嵌套选择器、条件语句、循环语句、代码块。

例如：

$font-size = 14px
body
  font $font-size
  #dialog
    $font-size = 16px
    font $font-size
  #footer
    font $font-size

编译为：

body {
  font: 14px;
}
body #dialog {
  font: 16px;
}
body #footer {
  font: 14px;
}

2、全局变量

stylus 支持全局变量，生效范围为整个 .styl 文件和依赖该.styl文件的.styl文件：当我们在文件 a 中定义了全局变量，我们在文件 b 中导入文件 a，那么文件 a 中定义的全局变量也会在文件 b 中全局生效。例如：

a.styl

$font-size = 14px
body
  font $font-size

b.styl

@import 'a.styl'
body
  font $font-size

编译为：

body {
  font: 14px;
}

3、向上冒泡查找变量

stylus 支持向上冒泡查找变量，即如果在当前块中没有找到变量，会向上冒泡查找距离当前块最近的变量。
如果找不到变量，将变量当做属性值以字面量的形式输出

例如：

$font-size = 12px
body
  $font-size = 14px
  div
    font $font-size
    color: $font-color

编译为：

body div {
  font: 14px;
  color: $font-color;
}

4、同名变量覆盖

在 stylus 中，我们可能会遇到同名变量的情况。这时候，遵循以下规则：

向上冒泡查找，后定义的变量会覆盖先定义的同名变量，局部变量会覆盖全局变量
如果变量存在于导入文件中，Stylus 在编译时按照文件导入顺序解析变量，后续导入文件的变量会覆盖同名变量。

$font-size = 12px
body
  width $font-size
  $font-size = 14px
  div
    font $font-size

编译为：

body {
  width: 12px;
}
body div {
  font: 14px;
}

5、属性查找引用 `@`

stylus 支持属性引用，即可以通过 @ 字符来引用前置属性的值。

div
  width 200px
  height @width
  #logo
    margin-left: (@width / 2)
    margin-top: (@height / 2)

编译为：

div {
  width: 200px;
  height: 200px;
}
div #logo {
  margin-left: 100px;
  margin-top: 100px;
}

6、创建空变量

我们不能使用null来创建空变量，但我么你可以使用括号()去做：

empty = ()
body {
  font: empty sans-serif;
}

编译为：

body {
  font: sans-serif;
}

五、实践总结

1、按照功能对变量分组

变量分组是一个很不错的事件，我们可以用它来管理变量，提高代码的可读性和可维护性：

避免变量名冲突
分组变量，便于查找和管理

我们可以使用 hash 对象

$theme-dark = {
  color: #333,
  baground: #fff,
}
$theme-light = {
  color: #fff,
  baground: #292A2D,
}

使用公共前缀：

/*
* 主题 dark
*/
$theme-dark-color = #333
$theme-dark-background = #fff
/*
* 主题 light
*/
$theme-light-color = #fff
$theme-light-background = #292A2D

拆分到不同文件： ::: file-tree

styles
- core
  - _variables.styl # 核心变量
  - _colors.styl # 颜色系统
  - _spacing.styl # 间距系统
- themes
  - _dark.styl # 暗色主题变量
  - _light.styl # 明亮主题变量
- components
  - _button.vars.styl # 组件级变量

:::

2、无法提升作用域（`!global`）

Sass 中可以使用 !global 关键字强制将局部变量提升为全局变量。

而在 stylus 中，没有 !global 关键字，不存在变量的作用域提升这一概念。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24