美文网首页
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