使用Stylus变量可提升CSS可维护性，通过定义颜色、字体、间距等全局变量实现样式的统一管理与复用；支持无前缀简洁语法，便于在任意位置声明和引用；结合分类组织（如颜色、尺寸、断点）构建清晰设计系统，并可与Mixin结合创建可复用组件，如按钮模板，从而减少重复代码，增强一致性，关键在于提前规划命名与结构。
使用 Stylus 变量能有效提升 CSS 代码的可维护性和复用性。通过定义一次常用值，比如颜色、字体、间距等，可以在多个样式规则中重复调用，修改时只需调整变量值，全局限制更新。
定义和使用变量
Stylus 允许在任意位置定义变量，语法简洁，无需像 Sass 或 Less 那样使用 @ 或 $ 前缀（当然也可以用 $ 提高可读性）。
例如：
colors = #007bff #6c757d #28a745spacing = 1rem
font-stack = "Helvetica", "Arial", sans-serif
之后在样式中直接引用：
立即学习“前端免费学习笔记（深入）”；
.buttoncolor white
background-color colors[0]
padding spacing
font-family font-stack
这样按钮的样式就依赖于统一变量，便于全局调整。
组织设计系统变量
将变量按类别分组管理，有助于构建清晰的设计系统。常见分类包括：
- 颜色：主色、辅助色、状态色
- 尺寸：字体大小、边距、圆角
- 响应点：断点用于媒体查询
- 阴影与动画：统一视觉效果
示例：
// Variables.stylprimary-color = #007bff
danger-color = #dc3545
font-size-base = 16px
border-radius = 4px
breakpoint-sm = 576px
breakpoint-md = 768px
shadow-sm = 0 1px 3px rgba(0,0,0,0.1)
在主样式文件中引入该文件后，所有组件均可使用这些变量。
结合混合（Mixins）增强复用
变量可以和 Mixin 结合，创建更高级的可复用结构。比如定义一个按钮样式模板：
button-style(color)border none
color white
background-color color
padding 10px 16px
border-radius border-radius
cursor pointer
然后使用变量调用：
.btn-primarybutton-style(primary-color)
.btn-danger
button-style(danger-color)
这样既保持了样式一致性，又实现了逻辑封装。
基本上就这些。通过合理使用 Stylus 变量，配合结构化组织和 Mixin，能显著减少重复代码，让样式更易维护。不复杂但容易忽略的是坚持提前规划变量命名和分类。
