Stylus 内置函数 #

// 创建 RGB 颜色
rgb(255, 0, 0)        // #ff0000
rgb(100, 50, 0)       // #643200

// 创建 RGBA 颜色
rgba(255, 0, 0, 0.5)  // rgba(255, 0, 0, 0.5)
rgba(#ff0000, 0.5)    // rgba(255, 0, 0, 0.5)

// 获取颜色分量
red(#e965c0)          // 233
green(#e965c0)        // 101
blue(#e965c0)         // 192
alpha(rgba(0, 0, 0, 0.5))  // 0.5

// 创建 HSL 颜色
hsl(120, 100%, 50%)   // #00ff00

// 创建 HSLA 颜色
hsla(120, 100%, 50%, 0.5)  // rgba(0, 255, 0, 0.5)

// 获取 HSL 分量
hue(#e965c0)          // 321.29deg
saturation(#e965c0)   // 75.54%
lightness(#e965c0)    // 65.49%

// 变亮
lighten(#3498db, 20%)   // #6ab0e6

// 变暗
darken(#3498db, 20%)    // #1f6dad

// 增加饱和度
saturate(#3498db, 20%)  // #2b9be0

// 降低饱和度
desaturate(#3498db, 20%) // #3d99d6

// 灰度化
grayscale(#3498db)      // #898989

// 补色
complement(#3498db)     // #db8034

// 反转
invert(#3498db)         // #cb6724

// 旋转色相
spin(#3498db, 180deg)   // #db8034

// 混合两种颜色
mix(#3498db, #e74c3c)        // #8d7289
mix(#3498db, #e74c3c, 30%)   // #5d7cb5 (30% 第一个颜色)

// 混合带透明度
mix(rgba(#3498db, 0.5), rgba(#e74c3c, 0.5))  // rgba(142, 114, 137, 0.75)

// 对比色
contrast(#3498db)      // #000 (黑)

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

.button
  background-color #3498db
  color contrast(#3498db)

// 绝对值
abs(-10px)    // 10px
abs(10px)     // 10px

// 四舍五入
round(5.5)    // 6
round(5.4)    // 5

// 向上取整
ceil(5.1)     // 6

// 向下取整
floor(5.9)    // 5

// 取模
4 % 3         // 1
mod(7, 3)     // 1

// 最小/最大值
min(1, 2, 3)  // 1
max(1, 2, 3)  // 3

// 幂运算
pow(2, 3)     // 8
pow(10, 2)    // 100

// 平方根
sqrt(16)      // 4
sqrt(2)       // 1.41421356

// 正弦
sin(0)        // 0
sin(90deg)    // 1

// 余弦
cos(0)        // 1
cos(90deg)    // 0

// 正切
tan(0)        // 0
tan(45deg)    // 1

// 弧度转换
deg-to-rad(180deg)  // 3.14159265rad
rad-to-deg(3.14159265rad)  // 180deg

// 转换单位
unit(10px, 'em')    // 10em
unit(10px, '%')     // 10%

// 获取单位
unit(10px)          // 'px'
unit(10em)          // 'em'
unit(10)            // ''

// 移除单位
remove-unit(10px)   // 10

// 计算百分比
percentage(1/2)     // 50%
percentage(3/4)     // 75%

// 字符串连接
s('hello %s', 'world')     // 'hello world'
s('color: %s', #3498db)    // 'color: #3498db'

// 字符串格式化
'%s + %s = %s' % (1 2 3)   // '1 + 2 = 3'

// 字符串查找
match('bar', 'foobar')     // 'bar'
match('^foo', 'foobar')    // 'foo'

// 替换
replace('i', 'o', 'vig')   // 'vog'
replace('a', 'x', 'aaa')   // 'xxx'

// 转换为字符串
'' + 123                   // '123'
'' + #3498db               // '#3498db'

// 大小写转换
uppercase('hello')         // 'HELLO'
lowercase('HELLO')         // 'hello'

// 转换为标识符
unquote('hello')           // hello (标识符)

// 列表长度
length(1 2 3)              // 3

// 获取元素
(1 2 3)[0]                 // 1
(1 2 3)[1]                 // 2
(1 2 3)[-1]                // 3 (最后一个)

// 推入元素
push(list, value)
  list + value

list = 1 2 3
push(list, 4)              // 1 2 3 4

// 弹出元素
pop(list)
  list[0..-2]

// 添加到开头
unshift(list, value)
  value list

// 移除第一个
shift(list)
  list[1..-1]

// 查找索引
index(1 2 3, 2)            // 1
index(1 2 3, 4)            // false

// 检查是否包含
contains(list, value)
  index(list, value) != false

contains(1 2 3, 2)         // true
contains(1 2 3, 4)         // false

// 遍历列表
join(separator, list)
  result = ''
  for item, i in list
    if i > 0
      result = result + separator
    result = result + item
  result

join(', ', 1 2 3)          // '1, 2, 3'

// 获取键
keys = (a: 1, b: 2, c: 3)
keys(keys)                 // a b c

// 获取值
values = (a: 1, b: 2, c: 3)
values(values)             // 1 2 3

// 检查键是否存在
(a in (a: 1, b: 2))        // true
(c in (a: 1, b: 2))        // false

// 合并对象
merge(obj1, obj2)
  result = obj1
  for key, value in obj2
    result[key] = value
  result

obj1 = (a: 1, b: 2)
obj2 = (b: 3, c: 4)
merge(obj1, obj2)          // (a: 1, b: 3, c: 4)

// 获取类型
typeof(#3498db)            // 'color'
typeof(16px)               // 'unit'
typeof('hello')            // 'string'
typeof(1 2 3)              // 'unit' (列表)
typeof((a: 1))             // 'object'
typeof(true)               // 'boolean'
typeof(null)               // 'null'

// 类型判断
is-color(#3498db)          // true
is-color(16px)             // false

is-unit(16px)              // true
is-unit(#3498db)           // false

is-string('hello')         // true
is-string(16px)            // false

is-ident(hello)            // true
is-ident('hello')          // false

is-boolean(true)           // true

is-null(null)              // true

is-defined(var)            // false (未定义)
is-defined(#3498db)        // true

// 转换为字符串
'' + 123                   // '123'

// 转换为数字
convert('16px')            // 16px (带单位)
convert('16')              // 16 (无单位)

// 获取当前选择器
selector()                 // 返回当前选择器字符串

// 获取选择器列表
selectors()                // 返回所有父选择器

// 嵌套选择器
selector-nest('.foo', '.bar')     // '.foo .bar'
selector-nest('.foo', '&:hover')  // '.foo:hover'

// 追加选择器
selector-append('.foo', '.bar')   // '.foo.bar'
selector-append('.foo', '--mod')  // '.foo--mod'

// 替换选择器
selector-replace('.a .b .c', '.b', '.d')  // '.a .d .c'

// 检查选择器是否存在
selector-exists('.button')  // 检查是否存在

// 定义变量
define('my-var', 10px)
my-var                      // 10px

// 检查变量是否定义
defined = is-defined('my-var')  // true

// URL 编码
url-encode('hello world')   // 'hello%20world'

// 使用缓存
cache-key = 'my-cache'
if !is-defined(cache-key)
  define(cache-key, expensive-calculation())

// 响应式字体大小
responsive-font(min-size, max-size, min-width = 320px, max-width = 1200px)
  font-size min-size
  @media (min-width: min-width)
    font-size "calc(%s + %s * ((100vw - %s) / %s))" % (min-size (max-size - min-size) min-width (max-width - min-width))
  @media (min-width: max-width)
    font-size max-size

.title
  responsive-font(16px, 32px)

// 网格宽度计算
grid-width(columns, total = 12, gutter = 30px, container = 1200px)
  (container - (total - 1) * gutter) / total * columns + (columns - 1) * gutter

.col-6
  width grid-width(6)

// 自动选择文字颜色
auto-text-color(bg, light = #fff, dark = #333)
  if lightness(bg) > 50%
    dark
  else
    light

// 生成悬停色
auto-hover-color(color, amount = 10%)
  if lightness(color) > 50%
    darken(color, amount)
  else
    lighten(color, amount)

// px 转 rem
px-to-rem(px, base = 16)
  unit(px / base, 'rem')

// px 转 em
px-to-em(px, base = 16)
  unit(px / base, 'em')

// 移除单位
strip-unit(value)
  unit(value, '')

// 第一个元素
first(list)
  list[0]

// 最后一个元素
last(list)
  list[-1]

// 反转列表
reverse(list)
  result = ()
  for item in list
    push(result, item)
  result

// 列表求和
sum(list)
  total = 0
  for item in list
    total = total + item
  total

// 列表平均值
average(list)
  sum(list) / length(list)