在CSS开发过程中，重复书写相同的颜色值、尺寸数值、字体配置等内容，不仅会增加代码量，后续修改时也需要逐个调整，维护成本很高。Stylus作为一款灵活的CSS预处理器，提供了完善的变量功能，能够帮助开发者把重复使用的样式值统一管理，大幅提升代码的复用性。
Stylus变量的基础定义与使用
Stylus变量的定义不需要额外的符号前缀，直接通过变量名 = 值的格式即可完成定义，使用时直接调用变量名就能获取对应的值。这种方式比原生CSS的自定义属性语法更简洁，也支持更多类型的值存储。
下面是一个基础的定义和使用示例：
// 定义基础变量 primary_color = #2d8cf0 default_padding = 16px base_font_size = 14px // 使用变量编写样式 .btn-primary background-color primary_color padding default_padding 24px font-size base_font_size color #fff border none border-radius 4px .card border 1px solid primary_color padding default_padding font-size base_font_size
常见场景下的变量复用实践
颜色体系复用
项目中通常会有统一的主色、辅助色、警示色、文本色等颜色体系，把这些颜色定义为变量后，所有相关样式都可以直接调用，后续调整主题色时只需要修改变量值即可全局生效。
// 颜色变量定义 color_primary = #2d8cf0 color_success = #19be6b color_warning = #ff9900 color_error = #ed4014 color_text_primary = #333 color_text_secondary = #666 color_border = #e8e8e8 // 按钮样式复用颜色变量 .btn-success background-color color_success color #fff .btn-warning background-color color_warning color #fff // 文本样式复用颜色变量 .text-primary color color_primary .text-secondary color color_text_secondary
尺寸与间距复用
统一的间距、圆角、阴影等尺寸相关的样式也可以定义为变量，保证整个项目的视觉规范统一，同时减少重复书写。
// 尺寸变量定义 spacing_small = 8px spacing_medium = 16px spacing_large = 24px border_radius_small = 4px border_radius_medium = 8px box_shadow_base = 0 2px 8px rgba(0, 0, 0, 0.1) // 卡片组件复用尺寸变量 .card padding spacing_medium margin-bottom spacing_large border-radius border_radius_medium box-shadow box_shadow_base // 弹窗组件复用尺寸变量 .modal padding spacing_large border-radius border_radius_medium box-shadow box_shadow_base
Stylus变量的作用域与嵌套使用
Stylus变量支持作用域规则，在局部作用域中定义的变量不会影响全局，同时变量也支持嵌套使用，即一个变量可以引用另一个变量的值。
// 全局变量
global_font_family = "PingFang SC", "Microsoft YaHei", sans-serif
.page-header
// 局部变量，仅在.page-header作用域内生效
header_height = 60px
height header_height
font-family global_font_family // 引用全局变量
.logo
// 嵌套引用局部变量
line-height header_height
font-size 20px
// 变量嵌套使用
base_spacing = 16px
spacing_large = base_spacing * 1.5 // 引用base_spacing变量计算新值
spacing_small = base_spacing * 0.5
.container
padding spacing_large
变量与混合宏配合提升复用性
Stylus的变量还可以和混合宏（mixin）配合使用，把固定的样式组合和变量结合，进一步提升代码复用程度。混合宏可以接收变量作为参数，动态生成不同的样式。
// 定义基础变量 color_primary = #2d8cf0 default_radius = 4px // 定义带参数的混合宏，使用变量作为默认值 button-style(bgColor = color_primary, radius = default_radius) background-color bgColor border-radius radius color #fff border none padding 8px 20px cursor pointer // 调用混合宏，使用默认变量值 .btn-primary button-style() // 调用混合宏，传入自定义参数覆盖默认值 .btn-success button-style(#19be6b) .btn-round button-style(color_primary, 20px)
通过合理使用Stylus变量，开发者可以把项目中所有重复使用的样式值统一管理，不仅减少了冗余代码，也降低了后续维护的成本。在实际项目中，建议把变量统一放在独立的配置文件中，方便全局管理和修改，让整个CSS项目的结构更清晰，开发效率更高。