Stylus 条件语句 #

// 基本 if 语句
theme = 'dark'

if theme == 'dark'
  body
    background-color #333
    color #fff

// if/else 语句
theme = 'light'

if theme == 'dark'
  body
    background-color #333
    color #fff
else
  body
    background-color #fff
    color #333

// 多条件判断
size = 'large'

if size == 'small'
  .button
    padding 5px 10px
    font-size 12px
else if size == 'medium'
  .button
    padding 10px 20px
    font-size 14px
else if size == 'large'
  .button
    padding 15px 30px
    font-size 18px
else
  .button
    padding 10px 20px
    font-size 14px

// unless 语句
debug = false

unless debug
  // 生产环境样式
  body
    background-color #fff

// 等同于
if not debug
  body
    background-color #fff

// 三元运算符
theme = 'dark'
bg-color = theme == 'dark' ? #333 : #fff

body
  background-color bg-color

// and 运算符
is-dark = true
is-responsive = true

if is-dark and is-responsive
  body
    background-color #333

// or 运算符
size = 'large'

if size == 'large' or size == 'xlarge'
  .button
    padding 20px 40px

// not 运算符
is-disabled = false

if not is-disabled
  .button
    cursor pointer

// 检查变量是否存在
if color
  .element
    color color

// 检查是否在列表中
colors = red green blue

if red in colors
  .element
    color red

// 检查是否在对象中
theme = {
  primary: #3498db
}

if primary in theme
  .button
    background-color theme.primary

// 在属性中使用条件
is-bold = true

.title
  font-weight is-bold ? bold : normal

// 多个属性
is-dark = true

body
  background-color is-dark ? #333 : #fff
  color is-dark ? #fff : #333

// 条件选择器
is-ie = false

.container
  width 1200px
  
  if is-ie
    width 1198px  // IE 修复

// 主题配置
theme = 'dark'

// 颜色定义
colors = {
  light: {
    bg: #fff,
    text: #333,
    primary: #3498db
  },
  dark: {
    bg: #1a1a1a,
    text: #e0e0e0,
    primary: #5dade2
  }
}

// 获取当前主题颜色
get-color(name)
  if theme == 'dark'
    colors.dark[name]
  else
    colors.light[name]

// 应用主题
body
  background-color get-color('bg')
  color get-color('text')

.button
  background-color get-color('primary')

// 响应式条件
screen-width = 800px

// 根据屏幕宽度选择布局
if screen-width < 768px
  .container
    width 100%
    padding 0 15px
else if screen-width < 1024px
  .container
    width 750px
    margin 0 auto
else
  .container
    width 960px
    margin 0 auto

// 按钮变体混入
button-variant(type = 'default')
  display inline-block
  padding 10px 20px
  border-radius 4px
  border none
  cursor pointer
  
  if type == 'primary'
    background-color #3498db
    color #fff
  else if type == 'secondary'
    background-color #2ecc71
    color #fff
  else if type == 'danger'
    background-color #e74c3c
    color #fff
  else if type == 'outline'
    background-color transparent
    color #3498db
    border 2px solid #3498db
  else
    background-color #f5f5f5
    color #333

// 使用
.btn-primary
  button-variant('primary')

.btn-danger
  button-variant('danger')

// 浏览器兼容性
support-ie = true
support-flexbox = true

.container
  if support-flexbox
    display flex
    flex-wrap wrap
  else
    display block
    overflow hidden
    
  .item
    if support-flexbox
      flex 1
    else
      float left
      width 25%
      
    if support-ie
      // IE 特定修复
      zoom 1

// 调试模式
debug = false

// 调试边框
debug-border()
  if debug
    border 1px dashed red

.container
  debug-border()
  padding 20px

.row
  debug-border()
  margin -10px

.col
  debug-border()
  padding 10px

// 功能开关
features = {
  animations: true,
  shadows: true,
  gradients: true
}

.card
  background-color #fff
  border-radius 8px
  
  if features.shadows
    box-shadow 0 2px 10px rgba(0, 0, 0, 0.1)
  
  if features.animations
    transition transform 0.3s ease
    
    &:hover
      transform translateY(-5px)
  
  if features.gradients
    background linear-gradient(to bottom, #fff, #f9f9f9)

// RTL 支持
direction = 'ltr'

// 方向感知属性
side-property(property, ltr-value, rtl-value)
  if direction == 'ltr'
    {property} ltr-value
  else
    {property} rtl-value

// 使用
.element
  side-property('margin-left', 10px, 0)
  side-property('margin-right', 0, 10px)
  side-property('text-align', left, right)

// 网格配置
grid = {
  columns: 12,
  gutter: 30px,
  container: 1200px,
  fluid: false
}

.container
  if grid.fluid
    width 100%
    max-width grid.container
  else
    width grid.container
  margin 0 auto
  padding-left grid.gutter / 2
  padding-right grid.gutter / 2

// 生成列
make-column(columns)
  if grid.fluid
    width (columns / grid.columns) * 100%
  else
    width (grid.container - (grid.columns - 1) * grid.gutter) / grid.columns * columns + (columns - 1) * grid.gutter

.col-6
  make-column(6)

// 根据背景色选择文字颜色
text-contrast(bg, light = #fff, dark = #333)
  if lightness(bg) > 50%
    dark
  else
    light

// 使用
.button
  background-color #3498db
  color text-contrast(#3498db)  // #fff

.card
  background-color #f5f5f5
  color text-contrast(#f5f5f5)  // #333

// 安全获取值
safe-get(obj, key, fallback = null)
  if key in obj
    obj[key]
  else
    fallback

// 使用
theme = {
  primary: #3498db
}

.button
  background-color safe-get(theme, 'primary', #333)  // #3498db
  border-color safe-get(theme, 'border', #ddd)       // #ddd

// 推荐：简单明了的条件
if is-dark
  background-color #333

// 不推荐：复杂的条件
if is-dark and not is-disabled and (size == 'large' or size == 'xlarge')
  // 太复杂

// 推荐：存储结果
is-dark-theme = theme == 'dark'
is-mobile = screen-width < 768px

if is-dark-theme
  // ...

if is-mobile
  // ...

// 在函数中使用提前返回
get-color(name)
  if name == 'primary'
    return #3498db
  if name == 'secondary'
    return #2ecc71
  #333