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