美文网首页
Stylus预处理器简介(七)内置方法5

Stylus预处理器简介(七)内置方法5

作者: 曲昶光 | 来源:发表于2021-07-18 17:44 被阅读0次

    数学方法

    abs(unit)

    abs(-5px)
    // => 5px
    
    abs(5px)
    // => 5px
    

    ceil(unit)

    ceil(5.5in)
    // => 6in
    
    

    floor(unit)

    floor(5.6px)
    // => 5px
    

    round(unit)

    round(5.5px)
    // => 6px
    
    round(5.4px)
    // => 5px
    

    注意:所有舍入函数都可以接受可选的精度参数____你可以在句点后传递你想保存的数字数:

    ceil(5.52px,1)
    // => 5.6px
    
    floor(5.57px,1)
    // => 5.5px
    
    round(5.52px,1)
    // => 5.5px
    

    sin(angle)

    返回给定“角度”的正弦值。如果角度以度数为单位,如45度,则视为度数,否则视为弧度。

    sin(30deg)
    // => 0.5
    
    sin(3*PI/4)
    // => 0.707106781
    

    cos(angle)

    返回给定角度的余弦值。如果角度以度数为单位,如45度,则视为度数,否则视为弧度。

    cos(180deg)
    // => -1
    

    tan(angle)

    返回给定角度的正切值。如果角度以度数为单位,如45度,则视为度数,否则视为弧度。

    tan(45deg)
    // => 1
    
    tan(90deg)
    // => Infinity
    

    min(a, b)

    min(1, 5)
    // => 1
    
    

    max(a, b)

      max(1, 5)
      // => 5
    
    

    even(unit)

    even(6px)
    // => true
    
    

    odd(unit)

    odd(5mm)
    // => true
    
    

    sum(nums)

    sum(1 2 3)
    // => 6
    
    

    avg(nums)

    avg(1 2 3)
    // => 2
    

    range(start, stop[, step])

    根据给定的步骤返回从开始到停止(包括在内)的单元列表。
    如果省略,step参数默认为1。它不可能是0。

    range(1, 6)
    // equals to `1..6`
    // 1 2 3 4 5 6
    
    range(1, 6, 2)
    // 1 3 5
    
    range(-6, -1, 2)
    // -6 -4 -2
    
    range(1px, 3px, 0.5px)
    // 1px 1.5px 2px 2.5px 3px
    

    它最常用于for循环:

    for i in range(10px, 50px, 10)
      .col-{i}
        width: i
    

    相当于

    .col-10 {
      width: 10px;
    }
    .col-20 {
      width: 20px;
    }
    .col-30 {
      width: 30px;
    }
    .col-40 {
      width: 40px;
    }
    .col-50 {
      width: 50px;
    }
    

    base-convert(num, base, width)

    返回转换为提供的' base '的' Literal num ',填充' width '零。
    Width默认为2。

    base-convert(1, 10, 3)
    // => 001
    
    base-convert(14, 16, 1)
    // => e
    
    base-convert(42, 2)
    // => 101010
    

    相关文章

      网友评论

          本文标题:Stylus预处理器简介(七)内置方法5

          本文链接:https://www.haomeiwen.com/subject/uwgppltx.html