Stylus 运算符 #

// 加法
width = 100px + 50px    // 150px
total = 10 + 20         // 30

// 减法
height = 200px - 50px   // 150px
diff = 100 - 30         // 70

// 乘法
area = 10px * 5         // 50px
double = 5 * 2          // 10

// 除法
half = 100px / 2        // 50px
ratio = 10 / 3          // 3.333...

// 相同单位
width = 100px + 50px    // 150px

// 不同单位
value = 100px + 1em     // 编译为 calc(100px + 1em)

// 无单位与有单位
padding = 10px * 2      // 20px
margin = 100px / 2      // 50px

// 单位转换
size = 1in + 72pt       // 2in (1in = 72pt)

remainder = 10 % 3      // 1
value = 15px % 4px      // 3px

// 计算网格宽度
columns = 12
gutter = 30px
container-width = 1200px

column-width = (container-width - (columns - 1) * gutter) / columns
// column-width = 80.75px

// 计算百分比
percentage(value, total)
  (value / total) * 100%

.col-6
  width percentage(6, 12) + '%'  // 50%

// 等于
5 == 5      // true
5 == 3      // false

// 不等于
5 != 3      // true
5 != 5      // false

// 严格等于（类型也必须相同）
5 == '5'    // true
5 === '5'   // false

// 大于
10 > 5      // true
5 > 10      // false

// 小于
5 < 10      // true
10 < 5      // false

// 大于等于
10 >= 10    // true
5 >= 10     // false

// 小于等于
5 <= 5      // true
10 <= 5     // false

font-size = 16px

if font-size > 14px
  // 大字体样式
  
if font-size >= 16px and font-size <= 20px
  // 中等字体样式

// 响应式断点
screen-width = 800px

if screen-width < 768px
  // 移动端样式
else if screen-width >= 768px and screen-width < 1024px
  // 平板样式
else
  // 桌面样式

// 与 (and)
true and true     // true
true and false    // false

// 或 (or)
true or false     // true
false or false    // false

// 非 (not)
not true          // false
not false         // true

// and 短路
value = false and error()   // false（不会执行 error()）

// or 短路
value = true or error()     // true（不会执行 error()）

is-dark = true
is-responsive = true

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

// 默认值设置
color = color or #333
font-size = font-size or 16px

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

if theme == 'dark' and size == 'large'
  .button
    padding 20px 40px
    background-color #333

// 生成 1 到 5 的范围
nums = 1..5   // 1 2 3 4 5

// 用于循环
for i in 1..5
  .col-{i}
    width (i * 20)%

// 生成 1 到 4 的范围
nums = 1...5  // 1 2 3 4

color = #3498db

// 加法
lighter = color + #111  // #45a9ec

// 减法
darker = color - #111   // #2387ca

// 乘法
saturated = color * 1.2

// 除法
desaturated = color / 1.2

color = rgb(100, 150, 200)

// 分别对 RGB 分量运算
lighter = color + rgb(20, 20, 20)
// rgb(120, 170, 220)

darker = color - rgb(20, 20, 20)
// rgb(80, 130, 180)

color1 = #ff0000
color2 = #0000ff

// 混合颜色
mixed = mix(color1, color2, 50%)
// #800080 (紫色)

// 使用 + 连接
prefix = 'btn'
name = prefix + '-primary'  // 'btn-primary'

// 与变量连接
num = 5
class = 'col-' + num        // 'col-5'

name = 'button'
size = 'large'

// 使用 {} 插值
selector = '.{name}-{size}'  // '.button-large'
property = 'margin-{side}'   // 需要 side 变量

// 普通赋值
color = #333

// 条件赋值（如果未定义才赋值）
color ?= #333

// 逻辑或赋值
color = color || #333

width = 100px

// 加法赋值
width += 50px   // width = 150px

// 减法赋值
width -= 25px   // width = 125px

// 乘法赋值
width *= 2      // width = 250px

// 除法赋值
width /= 5      // width = 50px

// 列表中
colors = red green blue

if red in colors
  // true

if yellow in colors
  // false

// 对象中
theme = {
  primary: #3498db,
  secondary: #2ecc71
}

if primary in theme
  // true

// 检查类型
is-type(16px)        // 'unit'
is-type(#3498db)     // 'color'
is-type('hello')     // 'string'
is-type(1 2 3)       // 'unit' (列表)
is-type({a: 1})      // 'object'

// 类型检查函数
typeof(16px)         // 'unit'
typeof(#3498db)      // 'color'
typeof('hello')      // 'string'

// 特定类型检查
is-unit(16px)        // true
is-color(#3498db)    // true
is-string('hello')   // true
is-ident(hello)      // true

1. () [] .             括号、下标、成员访问
2. ! not               逻辑非
3. * / %              乘除取模
4. + -                加减
5. .. ...             范围
6. in                 存在检查
7. == != === !==      相等比较
8. < > <= >=          大小比较
9. and &&             逻辑与
10. or ||             逻辑或
11. ?:                条件运算符
12. = += -= *= /=     赋值

// 不使用括号
result = 10 + 5 * 2    // 20

// 使用括号
result = (10 + 5) * 2  // 30

// 计算响应式字体
base-font-size = 16px
scale-ratio = 1.25

h1-font = base-font-size * pow(scale-ratio, 3)  // ~31.5px
h2-font = base-font-size * pow(scale-ratio, 2)  // ~25px
h3-font = base-font-size * pow(scale-ratio, 1)  // ~20px

h1
  font-size h1-font
h2
  font-size h2-font
h3
  font-size h3-font

// 根据亮度选择文字颜色
text-color-for-bg(bg-color)
  if lightness(bg-color) > 50%
    #333
  else
    #fff

.button
  background-color #3498db
  color text-color-for-bg(#3498db)  // #fff

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

// 网格计算
columns = 12
gutter = 30px
container = 1200px

// 计算列宽
column-width(span)
  (container - (columns - 1) * gutter) / columns * span + (span - 1) * gutter

// 生成网格类
for i in 1..columns
  .col-{i}
    width column-width(i)
    float left
    margin-right gutter
    
    &:last-child
      margin-right 0

// 生成间距工具类
spacing-values = {
  0: 0,
  1: 4px,
  2: 8px,
  3: 16px,
  4: 24px,
  5: 32px
}

for name, value in spacing-values
  // margin
  .m-{name}
    margin value
  .mt-{name}
    margin-top value
  .mb-{name}
    margin-bottom value
  .ml-{name}
    margin-left value
  .mr-{name}
    margin-right value
  
  // padding
  .p-{name}
    padding value
  .pt-{name}
    padding-top value
  .pb-{name}
    padding-bottom value
  .pl-{name}
    padding-left value
  .pr-{name}
    padding-right value

// 不推荐
result = a + b * c / d

// 推荐
result = a + (b * c / d)

// 不推荐
if 0
  // 不会执行（0 是 falsy）

// 推荐
if value == 0
  // 明确比较

// 不推荐
.element
  width (1200px - 30px * 11) / 12

// 推荐
container-width = 1200px
gutter = 30px
columns = 12
column-width = (container-width - gutter * (columns - 1)) / columns

.element
  width column-width