Stylus 循环语句 #

// 基本 for 循环
for i in 1 2 3 4 5
  .col-{i}
    width (i * 20)%

.col-1 {
  width: 20%;
}
.col-2 {
  width: 40%;
}
.col-3 {
  width: 60%;
}
.col-4 {
  width: 80%;
}
.col-5 {
  width: 100%;
}

// 使用 .. 范围（包含两端）
for i in 1..5
  .col-{i}
    width (i * 20)%

// 使用 ... 范围（不包含末尾）
for i in 1...5
  .col-{i}
    width (i * 25)%
    // 生成 col-1 到 col-4

// 遍历列表
colors = #3498db #2ecc71 #e74c3c #f39c12

for color, i in colors
  .btn-{i + 1}
    background-color color

.btn-1 {
  background-color: #3498db;
}
.btn-2 {
  background-color: #2ecc71;
}
.btn-3 {
  background-color: #e74c3c;
}
.btn-4 {
  background-color: #f39c12;
}

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

for name, color in theme
  .text-{name}
    color color
  
  .bg-{name}
    background-color color
  
  .border-{name}
    border-color color

.text-primary {
  color: #3498db;
}
.bg-primary {
  background-color: #3498db;
}
.border-primary {
  border-color: #3498db;
}
/* ... 其他颜色 */

// while 循环
i = 1
while i <= 5
  .col-{i}
    width (i * 20)%
  i = i + 1

// 生成间距类
spacing = 4px
i = 0
while i <= 5
  .m-{i}
    margin spacing * i
  .p-{i}
    padding spacing * i
  i = i + 1

// 跳出循环
for i in 1..10
  if i > 5
    break
  .item-{i}
    width i * 10px

// 跳过当前迭代
for i in 1..10
  if i % 2 == 0
    continue
  .item-{i}
    width i * 10px
    // 只生成奇数项

// 12 列网格系统
columns = 12
gutter = 30px

.row
  margin-left -(gutter / 2)
  margin-right -(gutter / 2)
  clearfix()

for i in 1..columns
  .col-{i}
    float left
    width (i / columns) * 100%
    padding-left gutter / 2
    padding-right gutter / 2
  
  .col-offset-{i}
    margin-left (i / columns) * 100%

// 生成间距工具类
spacing-scale = {
  0: 0,
  1: 4px,
  2: 8px,
  3: 12px,
  4: 16px,
  5: 20px,
  6: 24px,
  8: 32px,
  10: 40px,
  12: 48px,
  16: 64px
}

directions = {
  '': '',
  't': '-top',
  'r': '-right',
  'b': '-bottom',
  'l': '-left',
  'x': '-left' '-right',
  'y': '-top' '-bottom'
}

for size, value in spacing-scale
  for prefix, props in directions
    // margin
    if prefix == ''
      .m-{size}
        margin value
    else if prefix == 'x'
      .mx-{size}
        margin-left value
        margin-right value
    else if prefix == 'y'
      .my-{size}
        margin-top value
        margin-bottom value
    else
      .m{prefix}-{size}
        margin{props} value
    
    // padding
    if prefix == ''
      .p-{size}
        padding value
    else if prefix == 'x'
      .px-{size}
        padding-left value
        padding-right value
    else if prefix == 'y'
      .py-{size}
        padding-top value
        padding-bottom value
    else
      .p{prefix}-{size}
        padding{props} value

// 生成字体大小类
font-sizes = {
  xs: 12px,
  sm: 14px,
  base: 16px,
  lg: 18px,
  xl: 20px,
  '2xl': 24px,
  '3xl': 30px,
  '4xl': 36px,
  '5xl': 48px
}

for name, size in font-sizes
  .text-{name}
    font-size size
  .text-{name}-important
    font-size size !important

// 生成颜色工具类
colors = {
  white: #fff,
  black: #000,
  gray: {
    100: #f7fafc,
    200: #edf2f7,
    300: #e2e8f0,
    400: #cbd5e0,
    500: #a0aec0,
    600: #718096,
    700: #4a5568,
    800: #2d3748,
    900: #1a202c
  },
  red: {
    500: #f56565,
    600: #e53e3e
  },
  blue: {
    500: #4299e1,
    600: #3182ce
  },
  green: {
    500: #48bb78,
    600: #38a169
  }
}

// 生成颜色类
for color-name, color-value in colors
  if typeof(color-value) == 'object'
    for shade, hex in color-value
      .text-{color-name}-{shade}
        color hex
      .bg-{color-name}-{shade}
        background-color hex
  else
    .text-{color-name}
      color color-value
    .bg-{color-name}
      background-color color-value

// 生成圆角类
border-radiuses = {
  none: 0,
  sm: 2px,
  md: 4px,
  lg: 8px,
  xl: 12px,
  '2xl': 16px,
  '3xl': 24px,
  full: 9999px
}

for name, value in border-radiuses
  .rounded-{name}
    border-radius value
  
  .rounded-t-{name}
    border-top-left-radius value
    border-top-right-radius value
  
  .rounded-b-{name}
    border-bottom-left-radius value
    border-bottom-right-radius value
  
  .rounded-l-{name}
    border-top-left-radius value
    border-bottom-left-radius value
  
  .rounded-r-{name}
    border-top-right-radius value
    border-bottom-right-radius value

// 生成阴影类
shadows = {
  none: none,
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
  inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)'
}

for name, value in shadows
  .shadow-{name}
    box-shadow unquote(value)

// 生成动画延迟类
for i in 0..10
  .delay-{i}
    animation-delay (i * 100)ms

// 生成过渡延迟类
for i in 0..10
  .transition-delay-{i}
    transition-delay (i * 100)ms

// 生成 z-index 类
z-indexes = {
  dropdown: 1000,
  sticky: 1020,
  fixed: 1030,
  modal-backdrop: 1040,
  modal: 1050,
  popover: 1060,
  tooltip: 1070
}

for name, value in z-indexes
  .z-{name}
    z-index value

// 生成宽高百分比类
for i in 0..20
  percentage = i * 5
  .w-{percentage}
    width (percentage)%
  .h-{percentage}
    height (percentage)%

// 生成固定宽高类
sizes = 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 56 64 72 80 96

for size in sizes
  .w-{size}
    width size * 1px
  .h-{size}
    height size * 1px
  .min-w-{size}
    min-width size * 1px
  .min-h-{size}
    min-height size * 1px
  .max-w-{size}
    max-width size * 1px
  .max-h-{size}
    max-height size * 1px

// Flex 方向
flex-directions = {
  row: row,
  row-reverse: row-reverse,
  col: column,
  col-reverse: column-reverse
}

for name, value in flex-directions
  .flex-{name}
    flex-direction value

// Flex wrap
flex-wraps = {
  wrap: wrap,
  wrap-reverse: wrap-reverse,
  nowrap: nowrap
}

for name, value in flex-wraps
  .flex-{name}
    flex-wrap value

// Justify content
justify-values = {
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
  evenly: space-evenly
}

for name, value in justify-values
  .justify-{name}
    justify-content value

// Align items
align-values = {
  start: flex-start,
  end: flex-end,
  center: center,
  baseline: baseline,
  stretch: stretch
}

for name, value in align-values
  .items-{name}
    align-items value

// Flex grow/shrink
for i in 0..10
  .grow-{i}
    flex-grow i
  .shrink-{i}
    flex-shrink i

// 不推荐：生成太多类
for i in 1..100
  .w-{i}
    width i * 1%

// 推荐：只生成需要的
widths = 25 50 75 100
for w in widths
  .w-{w}
    width w * 1%

// 推荐：语义化名称
sizes = {
  sm: 8px,
  md: 16px,
  lg: 24px
}

for name, size in sizes
  .p-{name}
    padding size

// 推荐：将循环逻辑封装
generate-spacing(scale)
  for name, value in scale
    .m-{name}
      margin value
    .p-{name}
      padding value

spacing-scale = {
  sm: 8px,
  md: 16px,
  lg: 24px
}

generate-spacing(spacing-scale)