哈希对象

约 941 字大约 3 分钟

2025-04-18

在 Stylus 中，哈希（Hash）是一种键值对（key-value pairs）数据结构，类似于 JavaScript 的对象（Object）或 Python 的字典（Dictionary）。它允许你通过键名来存储和访问数据，非常适合用于组织样式变量、配置参数或设计系统规范。以下是关于 Stylus 哈希的详细说明：

一、基本语法

1、定义哈希

使用花括号 {} 和冒号 : 定义，允许多层嵌套：

// 定义哈希变量
$colors = {
  primary: #08c,
  secondary: #6c757d,
  danger: #dc3545
}
foo = {
  bar: {
    baz: 10px
  }
}
obj = {}
obj.key1 = value1
obj['key2'] = value2

2、访问值

通过点号 . 或方括号 [] 访问，方括号支持变量访问：

foo = {
  bar: {
    baz: 10px
  }
}

比如我们要获取 baz 的值，我们可以这样写：

使用点号 .：
```
foo.bar.baz
```
使用方括号 []：
```
foo['bar']['baz']
```
或者配合使用变量：
```
xyz = 'baz'
foo.bar[xyz]
```

3、匿名哈希

我们可以为列表创建匿名哈希对象，这是一种没有变量名的对象。

list = foo {int: 1, str: '1'} {node: a-node, color: #32E}

list[0]         // => foo
type(list[0])   // => 'ident'
type(list[1])   // => 'object'
list[1].int     // => 1
list[2].color   // => #32E

二、高级技巧

1、插值语法

在插值中使用哈希对象的话将以 CSS 的形式输出哈希对象的内容（虽然算不上是 Stylus 的任何功能）：

foo = {
  width: 10px,
  height: 20px,
  '&:hover': {
    padding: 0
  }
}

.bar
  {foo}

输出：

bar {
  width: 10px;
  height: 20px;
}
.bar:hover {
  padding: 0;
}

2、动态访问

$key = 'primary'
color = $colors[$key]  // → #08c

3、判断键值是否存在

使用 in 运算符检查哈希中是否存在指定键。

$colors = { primary: #08c, secondary: #6c757d }
primary in $colors // => true
danger in $colors // => false

4、遍历

$colors = {
  primary: #08c,
  secondary: #6c757d
}
for key, value in $colors
  .text-{key}
    color: value

输出：

.text-primary {
  color: #08c;
}
.text-secondary {
  color: #6c757d;
}

5、默认值设置

get-color(key, fallback = #000)
  return $colors[key] || fallback

bg = get-color('warning', #ff0) // => #ff0

三、内置函数

Stylus 提供了一些内置函数来操作哈希：

1、`keys($hash)`

返回哈希的所有键名。

$colors = { primary: #08c, secondary: #6c757d }
keys($colors) // => primary secondary

2、`values($hash)`

返回哈希的所有值。

$colors = { primary: #08c, secondary: #6c757d }
values($colors) // => #08c #6c757d

3、`merge($hash1, $hash2)`

合并两个哈希。

$colors = { primary: #08c, secondary: #6c757d }
$more-colors = { danger: #dc3545 }
merge($colors, $more-colors)
// => { primary: #08c, secondary: #6c757d, danger: #dc3545 }

4、`remove($hash, key)`

删除哈希中的指定键。

$colors = { primary: #08c, secondary: #6c757d }
remove($colors, 'secondary') // => { primary: #08c }

5、`length($hash)`

返回哈希的长度（键值对数量）。

$colors = { primary: #08c, secondary: #6c757d }
length($colors) // => 2

四、注意事项

不可直接修改：Stylus 哈希是静态的，修改需重新赋值

// ❌ 错误
$colors.primary = #f00

// ✅ 正确
$colors = merge($colors, { primary: #f00 })

键名规则：
- 支持带引号或不带引号的键名（如 'dark-mode' 或 darkMode）
- 包含特殊字符时必须加引号
与 JS 对象区别：
特性 Stylus 哈希 JavaScript 对象
可变性 不可直接修改可直接修改属性
方法需使用内置函数有原型方法
遍历专用 for 语法 for...in/Object.keys()

特性	Stylus 哈希	JavaScript 对象
可变性	不可直接修改	可直接修改属性
方法	需使用内置函数	有原型方法
遍历	专用 `for` 语法	`for...in`/`Object.keys()`

五、实际应用场景

1、设计系统配置

$design-system = {
  colors: {
    primary: #3498db,
    text: #2c3e50
  },
  spacing: {
    sm: 8px,
    md: 16px
  }
}

.card
  padding: $design-system.spacing.md
  color: $design-system.colors.text

2、响应式断点管理

$breakpoints = {
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px
}

@media (min-width: $breakpoints.tablet)
  .container
    width: 80%

3、主题切换

$themes = {
  light: {
    bg: #fff,
    text: #333
  },
  dark: {
    bg: #222,
    text: #eee
  }
}

body[data-theme="dark"]
  background: $themes.dark.bg
  color: $themes.dark.text

六、最佳实践

命名空间：使用 $ 前缀区分哈希变量（如 $config）

模块化：将不同功能的哈希分开管理：

// colors.styl
$colors = { /* ... */ }

// spacing.styl
$spacing = { /* ... */ }

文档注释：

/*
 * @type {Object}
 * 主题颜色配置
 */
$theme-colors = { /* ... */ }

Stylus 的哈希结构特别适合管理：

设计系统规范（颜色、间距、字体等）
主题配置
响应式断点
组件参数预设

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24