0.2.1 • Published 7 years ago
postcss-unit-converter v0.2.1
PostCSS Unit Converter
PostCSS plugin that provides a function to convert CSS values from one unit to another.
This is a wrapper on top of css-unit-converter to provide a convert()
CSS function.
/* Input example */
.foo {
width: convert(600px, pt);
}
@media screen and (min-width: convert(200px, pt)) {
bar {
display: none;
}
}
/* Output example */
.foo {
width: 450pt;
}
@media screen and (min-width: 150pt) {
bar {
display: none;
}
}
Usage
postcss([ require('postcss-unit-converter')(options) ])
See PostCSS docs for examples for your environment.
options
Type: Object | Null
Default:
{
precision: 5
}
precision
(Number): The maximum number of decimals.
Provided CSS functions
convert()
Converts a CSS value from one unit to another.
convert(sourceValue, targetUnit, precision);
Accepts 3 arguments:
sourceValue
: The value to be convertedtargetUnit
: The target unitprecision
(optional): The maximum number of decimals. default is 5.
Available Units
- Length: px, cm, mm, in, pt, pc.
- Angle: deg, grad, rad, turn.
- Time: s, ms.
- Frequency: Hz, kHz.
- Resolution: dpi, dpcm, dppx.
Example
.foo {
/* Input example */
transform: rotate(convert(180deg, rad, 2));
}
.foo {
/* Output example */
transform: rotate(3.14rad);
}
Credits
Thanks to:
- css-unit-converter - Created by Andy Jansson.