Stylus 变量 #

变量基础 #

变量是 Stylus 最基本也是最重要的功能之一。通过变量，你可以存储和复用值，使样式更易于维护。

定义变量 #

使用 = 定义变量：

stylus

// 定义颜色变量
primary-color = #3498db
secondary-color = #2ecc71

// 定义尺寸变量
base-font-size = 16px
base-line-height = 1.5
container-width = 1200px

// 使用变量
.button
  background-color primary-color
  font-size base-font-size

.container
  max-width container-width

编译结果：

css

.button {
  background-color: #3498db;
  font-size: 16px;
}
.container {
  max-width: 1200px;
}

变量命名规则 #

stylus

// 推荐：使用连字符
primary-color = #3498db
font-size-base = 16px

// 也可以使用下划线
primary_color = #3498db
font_size_base = 16px

// 驼峰命名
primaryColor = #3498db
fontSizeBase = 16px

// 不推荐：数字开头
// 1color = #333  // 错误

数据类型 #

Stylus 支持多种数据类型：

1. 数字 (Number) #

stylus

// 整数
z-index = 100

// 浮点数
opacity = 0.8

// 带单位
width = 100px
height = 50%
time = 0.3s

// 计算
total-width = 100px + 50px  // 150px
half-width = 100px / 2      // 50px

2. 颜色 (Color) #

stylus

// 十六进制
primary = #3498db
dark = #333

// RGB
red-color = rgb(255, 0, 0)

// RGBA
transparent-bg = rgba(0, 0, 0, 0.5)

// HSL
green-color = hsl(120, 100%, 50%)

// 颜色名称
text-color = white
bg-color = black

3. 字符串 (String) #

stylus

// 无引号字符串
font-family = Helvetica, sans-serif

// 有引号字符串
message = "Hello, Stylus!"

// 使用
.element
  font-family font-family
  content message

4. 布尔值 (Boolean) #

stylus

is-dark = true
is-responsive = false

// 条件判断
if is-dark
  body
    background-color #333
    color #fff

5. 列表 (List) #

stylus

// 空格分隔
colors = #3498db #2ecc71 #e74c3c

// 逗号分隔
fonts = Helvetica, Arial, sans-serif

// 访问列表元素
primary = colors[0]   // #3498db
secondary = colors[1] // #2ecc71

// 使用
.element
  color colors[0]
  font-family fonts

6. 对象/哈希 (Object/Hash) #

stylus

// 定义对象
theme = {
  primary: #3498db,
  secondary: #2ecc71,
  success: #27ae60,
  warning: #f39c12,
  danger: #e74c3c
}

// 访问属性
.element
  color theme.primary
  background-color theme['secondary']

// 嵌套对象
breakpoints = {
  mobile: 480px,
  tablet: 768px,
  desktop: {
    small: 1024px,
    large: 1440px
  }
}

// 访问嵌套属性
desktop-large = breakpoints.desktop.large

7. Null #

stylus

value = null

// 条件判断
if value
  // 不会执行
else
  // 会执行

变量作用域 #

局部变量 #

默认情况下，变量是局部作用域：

stylus

color = #333

.button
  color = #3498db  // 局部变量
  background-color color  // #3498db

.link
  color color  // #333（使用全局变量）

全局变量 #

使用 !global 标志创建全局变量：

stylus

color = #333

.button
  color = #3498db !global  // 全局变量
  background-color color

.link
  color color  // #3498db（全局变量已被修改）

变量查找顺序 #

Stylus 按照以下顺序查找变量：

text

1. 当前作用域
2. 父作用域
3. 全局作用域

stylus

base-color = #333

.parent
  base-color = #666
  
  .child
    color base-color  // #666（从父作用域继承）

属性访问 #

使用 @ 符号访问当前规则中的属性值：

stylus

.element
  width 100px
  height @width  // 100px
  
  padding 10px
  margin @padding * 2  // 20px
  
  color #333
  border 1px solid @color  // 1px solid #333

变量默认值 #

使用 || 或 ?= 设置默认值：

stylus

// 方式一：使用 || 运算符
color = color || #333

// 方式二：使用 ?= 运算符（推荐）
color ?= #333

// 如果 color 未定义，则赋值为 #333
// 如果 color 已定义，则保持原值

实际应用：

stylus

// 定义默认变量
base-font-size ?= 16px
base-line-height ?= 1.5
primary-color ?= #3498db

// 可以在导入前覆盖这些变量
base-font-size = 14px

// 然后导入
@import 'theme'

// base-font-size 仍然是 14px

变量插值 #

使用 {} 将变量插入到选择器或属性名中：

stylus

// 选择器插值
prefix = 'btn'

.{prefix}
  padding 10px 20px

.{prefix}-primary
  background-color #3498db

.{prefix}-secondary
  background-color #2ecc71

// 属性名插值
property = 'margin'

.element
  {property} 10px
  {property}-top 20px

编译结果：

css

.btn {
  padding: 10px 20px;
}
.btn-primary {
  background-color: #3498db;
}
.btn-secondary {
  background-color: #2ecc71;
}
.element {
  margin: 10px;
  margin-top: 20px;
}

实用示例 #

主题配置 #

stylus

// 主题变量
theme = {
  colors: {
    primary: #3498db,
    secondary: #2ecc71,
    success: #27ae60,
    warning: #f39c12,
    danger: #e74c3c,
    text: #333,
    text-light: #666,
    border: #ddd,
    background: #f5f5f5
  },
  fonts: {
    base: 'Helvetica Neue', Helvetica, Arial, sans-serif,
    heading: 'Georgia', serif,
    code: 'Fira Code', monospace
  },
  sizes: {
    base: 16px,
    small: 14px,
    large: 18px,
    heading: 24px
  },
  spacing: {
    xs: 4px,
    sm: 8px,
    md: 16px,
    lg: 24px,
    xl: 32px
  }
}

// 使用主题变量
body
  font-family theme.fonts.base
  font-size theme.sizes.base
  color theme.colors.text
  background-color theme.colors.background

h1, h2, h3
  font-family theme.fonts.heading
  color theme.colors.primary

.button
  padding theme.spacing.md theme.spacing.lg
  background-color theme.colors.primary
  color white
  border-radius 4px
  
  &.secondary
    background-color theme.colors.secondary

断点变量 #

stylus

// 响应式断点
breakpoints = {
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
}

// 媒体查询混入
media-up(breakpoint)
  @media (min-width: breakpoint)
    {block}

media-down(breakpoint)
  @media (max-width: breakpoint - 1)
    {block}

// 使用
.container
  width 100%
  padding 0 15px
  
  +media-up(breakpoints.md)
    max-width 720px
    
  +media-up(breakpoints.lg)
    max-width 960px
    
  +media-up(breakpoints.xl)
    max-width 1140px

Z-index 管理 #

stylus

// Z-index 层级管理
z-index = {
  dropdown: 1000,
  sticky: 1020,
  fixed: 1030,
  modal-backdrop: 1040,
  modal: 1050,
  popover: 1060,
  tooltip: 1070
}

.dropdown
  position relative
  z-index z-index.dropdown

.modal
  position fixed
  z-index z-index.modal
  
  &-backdrop
    position fixed
    z-index z-index.modal-backdrop

.tooltip
  position absolute
  z-index z-index.tooltip

颜色函数变量 #

stylus

// 基础颜色
colors = {
  blue: #3498db,
  green: #2ecc71,
  red: #e74c3c,
  yellow: #f1c40f,
  purple: #9b59b6
}

// 生成颜色类
for name, color in colors
  .text-{name}
    color color
  
  .bg-{name}
    background-color color
  
  .border-{name}
    border-color color

最佳实践 #

1. 命名规范 #

stylus

// 推荐：语义化命名
primary-color = #3498db
text-color = #333
border-radius = 4px

// 不推荐：无意义命名
color1 = #3498db
color2 = #333
value1 = 4px

2. 组织变量文件 #

stylus

// _variables.styl

// 颜色
// ============================
color-primary = #3498db
color-secondary = #2ecc71
color-text = #333
color-border = #ddd

// 排版
// ============================
font-family-base = 'Helvetica Neue', sans-serif
font-size-base = 16px
line-height-base = 1.5

// 间距
// ============================
spacing-unit = 8px
spacing-xs = spacing-unit * 0.5
spacing-sm = spacing-unit
spacing-md = spacing-unit * 2
spacing-lg = spacing-unit * 3

// 断点
// ============================
breakpoint-sm = 576px
breakpoint-md = 768px
breakpoint-lg = 992px
breakpoint-xl = 1200px

3. 使用对象组织变量 #

stylus

// 推荐：使用对象分组
config = {
  colors: {
    primary: #3498db,
    secondary: #2ecc71
  },
  fonts: {
    base: 'Helvetica, sans-serif',
    heading: 'Georgia, serif'
  }
}

// 不推荐：扁平命名
config-colors-primary = #3498db
config-colors-secondary = #2ecc71
config-fonts-base = 'Helvetica, sans-serif'

下一步 #

掌握变量后，继续学习选择器了解更多选择器的高级用法！