Random random number function in stylus

Write in front

Like Sass, Stylus is an excellent CSS precompiled voice: expressive, dynamic and powerful CSS;

When using Stylus to write the following effect, I need to use random numbers. However, when I read Stylus's documents, I did not find any available functions.

After reading the new year's day of Stylus, I found that it supports JavaScript API. When something can't be done with Stylus, define it in JavaScript. So we use. define(name, fn) to define a random function on Stylus.

1, If you introduce Stylus directly to compile

Extend a random function to Stylus directly

var stylus = require('stylus')
// Extending random function to stylus
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)
})

// Perform your other actions
Copy code

2, If you are using Stylus in webback

According to the rules of configuring stylus in Web pack, we need to write random function as a plugin.

// stylus-random.js
/*A stylus plugin for generating random numbers*/
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)
    })
  }
}
Copy code

Then it is introduced into webpack and used according to the configuration rules of stylus loader:

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

Now, we can use random function in stylus~

@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)
    }
  }
}
Copy code

After compilation:

@-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);
}
...
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);
}
...
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);
}
}
Copy code