What is @csstools/postcss-stepped-value-functions?
@csstools/postcss-stepped-value-functions is a PostCSS plugin that provides stepped value functions for CSS. It allows you to define values that change in steps, which can be useful for creating responsive designs or animations that need to change at specific intervals.
What are @csstools/postcss-stepped-value-functions's main functionalities?
step-start
The `step-start` function allows you to define a value that changes in steps starting from the initial value. In this example, the width of the element changes in three steps from 100px to 200px.
/* Input CSS */
.element {
width: step-start(100px, 200px, 3);
}
/* Output CSS */
.element {
width: 100px;
}
.element:nth-child(2) {
width: 150px;
}
.element:nth-child(3) {
width: 200px;
}
step-end
The `step-end` function allows you to define a value that changes in steps ending at the final value. In this example, the height of the element changes in four steps from 50px to 150px.
/* Input CSS */
.element {
height: step-end(50px, 150px, 4);
}
/* Output CSS */
.element {
height: 50px;
}
.element:nth-child(2) {
height: 83.33px;
}
.element:nth-child(3) {
height: 116.67px;
}
.element:nth-child(4) {
height: 150px;
}
Other packages similar to @csstools/postcss-stepped-value-functions
postcss-preset-env
postcss-preset-env allows you to use future CSS features today by converting modern CSS into something most browsers can understand. It includes a variety of plugins that provide similar functionalities to @csstools/postcss-stepped-value-functions, such as custom properties and media queries.
postcss-custom-properties
postcss-custom-properties is a PostCSS plugin that lets you use CSS custom properties (variables) in more browsers. While it doesn't provide stepped value functions, it allows for dynamic and reusable values in your CSS, which can be combined with other plugins to achieve similar results.
PostCSS Stepped Value Functions
PostCSS Stepped Value Functions lets you use round
, rem
and mod
stepped value functions, following the CSS Values 4.
.test-functions {
padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
transform: rotate(mod(-140deg, -90deg));
top: round(15px, 4px);
right: round(nearest, 15px, 4px);
bottom: round(up, 15px, 7px);
left: round(down, 15px, 4px);
width: round(to-zero, 15px, 4px);
}
/* becomes */
.test-functions {
padding: 8px 3px 1px calc(3px + 50%);
transform: rotate(-50deg);
top: 16px;
right: 16px;
bottom: 21px;
left: 12px;
width: 12px;
}
Usage
Add PostCSS Stepped Value Functions to your project:
npm install postcss @csstools/postcss-stepped-value-functions --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssSteppedValueFunctions = require('@csstools/postcss-stepped-value-functions');
postcss([
postcssSteppedValueFunctions()
]).process(YOUR_CSS );
PostCSS Stepped Value Functions runs in all Node environments, with special
instructions for:
⚠️ About custom properties
Given the dynamic nature of custom properties it's impossible to know what the variable value is, which means the plugin can't compute a final value for the stylesheet.
Because of that, any usage that contains a var
is skipped.
Options
preserve
The preserve
option determines whether the original notation
is preserved. By default, it is not preserved.
postcssSteppedValueFunctions({ preserve: true })
.test-functions {
padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
transform: rotate(mod(-140deg, -90deg));
top: round(15px, 4px);
right: round(nearest, 15px, 4px);
bottom: round(up, 15px, 7px);
left: round(down, 15px, 4px);
width: round(to-zero, 15px, 4px);
}
/* becomes */
.test-functions {
padding: 8px 3px 1px calc(3px + 50%);
padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
transform: rotate(-50deg);
transform: rotate(mod(-140deg, -90deg));
top: 16px;
top: round(15px, 4px);
right: 16px;
right: round(nearest, 15px, 4px);
bottom: 21px;
bottom: round(up, 15px, 7px);
left: 12px;
left: round(down, 15px, 4px);
width: 12px;
width: round(to-zero, 15px, 4px);
}