postcss-random

PostCSS plugin to generate random numbers based on random seeds using random() function.

Note: It's best practice to require the plugin right before postcss-calc.

Installation

$ npm install postcss-random

Examples

Input

/**

	NOTE:
	- CSS units can be added right after function call (e.g. 'px')
	- Syntax: random(min, max, {options})

 */

.foo{
	transform: translateX(random(0,20,{round: true})px);
}

Output

.foo{
	transform: translateX(12px);
}

Options

Note: All options can also be defined inline.

var postcssRandom = require('postcss-random');

var postcssProcessors = [
	postcssRandom({
		randomSeed:		0;			// default: 0
		round: 			true,		// default: false
		noSeed: 		true,		// default: false
		floatingPoint: 	10 			// default: 5
	})
]

randomSeed (Integer)

sets initial seed

round (Boolean)

if true, returns an integer

noSeed (Boolean)

if true, the returned value will be seed-independent and recalculated with each compilation

floatingPoint (Integer)

sets the number of digits after decimal point

Inline-Options

Input

*{
	randomSeed: 0;
}

.foo{
	transform: translateX(random(0,20)%);
}

Output

*{
}

.foo{
	transform: translateX(11.12345%);
}

Input (noSeed : true)

*{
	randomSeed: 0;
}

.foo{
	transform: translateX(random(0,20, {noSeed: true} )%);
}

Output

*{
}

.foo{
	/* returned value changes with each compilation */
	transform: translateX(6.12345%);
}

License

Changelog

Contributors

• Paul Kamma
• Marten Zander