在stylus中实现random随机数功能

写在前面

与 Sass 一样,Stylus 是一门优秀的 CSS 预编译语音:富有表现力,动态,强大的CSS;

在使用 Stylus 写下面这个效果的时候,需要用到随机数,可是我翻阅了 Stylus 的文档,却没有发现可用的函数。
在这里插入图片描述
翻阅 Stylus 的文旦,发现 Stylus 里面支持 JavaScript API,当有一些事情无法使用 Stylus 完成的时候,就在 JavaScript 中定义它。所以我们使用 .define(name, fn) 在 Stylus 上定义一个 random 函数。

一、如果你是直接引入的 Stylus 来编译

直接给 Stylus 扩展一个 random 函数

var stylus = require('stylus')
// 给stylus扩展一个random函数
style.define('random', function(min, max) {
	if(min === undefined || max === undefined) {
	  return Math.random()
	}
	return Math.floor(Math.random() * (Number(max) - Number(min) + 1)) + Number(min)
})

// 执行你的其他操作

二、如果你是在webpack中使用Stylus

那么根据在 webpack 中配置 stylus 的规则,我们需要将 random 函数单独写成一个 plugin。

// stylus-random.js
/*一个stylus plugin,用于生成随机数*/
module.exports = function() {
  return function(style) {
    style.define('random', function(min, max) {
      if(min === undefined || max === undefined) {
        return Math.random()
      }
      return Math.floor(Math.random() * (Number(max) - Number(min) + 1)) + Number(min)
    })
  }
}

然后在 webpack 中引入,并根据 stylus-loader 的配置规则来使用它:

const stylusRandom = require('./stylus-random')
...
stylus: {
  use: [stylusRandom()]
}
...

现在呢,我们就可以在 stylus 中来使用 random 函数咯~

@keyframes ani1 {
  $indent=20
  for $index in 1..$indent {
    {$index*100/$indent + '%'} {
      clip-path: inset(random(0, 100)*1px 0 random(0, 100)*1px 0)
    }
  }
}

编译后:

@-webkit-keyframes ani1-data-v-88b5672e {
5% {
    -webkit-clip-path: inset(83px 0 75px 0);
            clip-path: inset(83px 0 75px 0);
}
10% {
    -webkit-clip-path: inset(90px 0 97px 0);
            clip-path: inset(90px 0 97px 0);
}
...
90% {
    -webkit-clip-path: inset(69px 0 72px 0);
            clip-path: inset(69px 0 72px 0);
}
95% {
    -webkit-clip-path: inset(91px 0 61px 0);
            clip-path: inset(91px 0 61px 0);
}
100% {
    -webkit-clip-path: inset(15px 0 98px 0);
            clip-path: inset(15px 0 98px 0);
}
}
@keyframes ani1-data-v-88b5672e {
5% {
    -webkit-clip-path: inset(83px 0 75px 0);
            clip-path: inset(83px 0 75px 0);
}
10% {
    -webkit-clip-path: inset(90px 0 97px 0);
            clip-path: inset(90px 0 97px 0);
}
...
90% {
    -webkit-clip-path: inset(69px 0 72px 0);
            clip-path: inset(69px 0 72px 0);
}
95% {
    -webkit-clip-path: inset(91px 0 61px 0);
            clip-path: inset(91px 0 61px 0);
}
100% {
    -webkit-clip-path: inset(15px 0 98px 0);
            clip-path: inset(15px 0 98px 0);
}
}

文中截图的css效果来自:https://neveryu.github.io/web-bookmarks/favorite/css-animate.html

参考资料

Stylus 中文文档
张鑫旭 stylus中文版参考文档
stylus-loader

-------------------(正文完)---------------------------
一个前端的学习交流群,想进来面基的,可以加群:
Vue学习交流 React学习交流
或者手动search群号:685486827832485817


写在最后: 约定优于配置-------软件开发的简约原则
-------------------------------- (完)--------------------------------------

我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值