PostCSS Number Functions

PostCSS Number Functions lets you use Sass Number Functions in CSS, which include abs(), ceil(), floor(), max(), min(), percentage(), random() and round().

.example {
  width: floor(500px / 3);
}

/* becomes */

.example {
  width: 166px;
}

Features

abs

The abs() function returns a number with its absolute value, preserving its CSS unit.

ceil

The ceil() function returns a number rounded up to a whole number, preserving its CSS unit.

floor

The floor() function returns a number rounded down to a whole number, preserving its CSS unit.

max

The max() function returns the maximum value of several numbers separated by commas, preserving its CSS unit.

min

The min() function returns the minimum value of several numbers separated by commas, preserving its CSS unit.

percentage

The percentage() function returns the percentage from a number, transforming its CSS unit into %.

random

The random() function returns a random, unitless number between 0 and 1, including 0 but not including 1. If it is passed one number then it returns a random number between 0 and that number, including both numbers and preserving the unit of the argument. If it is passed two arguments then it returns a random number between those numbers, including both numbers and preserving the unit of the later argument.

round

The floor() function returns a number rounded to the nearest whole number, preserving its CSS unit.

Usage

Add PostCSS Number Functions to your build tool:

npm install postcss-number-functions --save-dev

Node

Use PostCSS Number Functions to process your CSS:

import PostCSSNumberFunctions from 'postcss-number-functions';

PostCSSNumberFunctions.process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Number Functions as a plugin:

import postcss from 'gulp-postcss';
import PostCSSNumberFunctions from 'postcss-number-functions';

postcss([
  PostCSSNumberFunctions()
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Number Functions in your Gulpfile:

import postcss from 'gulp-postcss';
import PostCSSNumberFunctions from 'postcss-number-functions';

gulp.task('css', () => gulp.src('./src/*.css').pipe(
  postcss([
    PostCSSNumberFunctions()
  ])
).pipe(
  gulp.dest('.')
));

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Number Functions in your Gruntfile:

import PostCSSNumberFunctions from 'postcss-number-functions';

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
       PostCSSNumberFunctions()
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

csstools/postcss-number-functions