@function px()
Convert to px
Parameters
$input: (number)
the input value with units to be converted
Example
scss
Convert rem to px
.sin{
font-size: px(4rem);
}
css
compiled
.sin {
font-size: 64px;
}Requires
@function to-unit()
@function pt()
Convert to pt
Parameters
$input: (number)
the input value with units to be converted
Example
scss
Convert rem to pt
.sin{
font-size: pt(4rem);
}
css
compiled
.sin {
font-size: 48pt;
}Requires
@function to-unit()
@function pc()
Convert to pc
Parameters
$input: (number)
the input value with units to be converted
Example
scss
Convert rem to pc
.sin{
font-size: pc(4rem);
}
css
compiled
.sin {
font-size: 4pc;
}Requires
@function to-unit()
@function in()
Convert to in
Parameters
$input: (number)
the input value with units to be converted
Example
scss
Convert rem to in
.sin{
font-size: in(4rem);
}
css
compiled
.sin {
font-size: 0.6666666667in;
}Requires
@function to-unit()
@function mm()
Convert to mm
Parameters
$input: (number)
the input value with units to be converted
Example
scss
Convert rem to mm
.sin{
font-size: mm(4rem);
}
css
compiled
.sin {
font-size: 16.9333333333mm;
}Requires
@function to-unit()
@function cm()
Convert to cm
Parameters
$input: (number)
the input value with units to be converted
Example
scss
Convert rem to cm
.sin{
font-size: cm(4rem);
}
css
compiled
.sin {
font-size: 1.6933333333cm;
}Requires
@function to-unit()
@function to-unit()
Convert units.
| Function | Input units |
|---|---|
| Absolute length | |
| px(input); | px, pt, pc, in, mm, cm, em, rem, number |
| pt(input); | px, pt, pc, in, mm, cm, em, rem, number |
| pc(input); | px, pt, pc, in, mm, cm, em, rem, number |
| in(input); | px, pt, pc, in, mm, cm, em, rem, number |
| mm(input); | px, pt, pc, in, mm, cm, em, rem, number |
| cm(input); | px, pt, pc, in, mm, cm, em, rem, number |
| Relative length | |
| em(input); | px, pt, pc, in, mm, cm, em, rem, number |
| rem(input); | px, pt, pc, in, mm, cm, em, rem, number |
| ex(input); | ex, number |
| ch(input); | ch, number |
| vw(input); | vw, number |
| vh(input); | vh, number |
| vmin(input); | vmin, number |
| vmax(input); | vmax, number |
| Angle | |
| deg(input); | deg, rad, grad, turn, number |
| rad(input); | deg, rad, grad, turn, number |
| grad(input); | deg, rad, grad, turn, number |
| turn(input); | deg, rad, grad, turn, number |
| Resolution | |
| dpi(input); | dpi, dpcm, dppx, number |
| dpcm(input); | dpi, dpcm, dppx, number |
| dppx(input); | dpi, dpcm, dppx, number |
| Time | |
| s(input); | s, ms, number |
| ms(input); | s, ms, number |
| Frequency | |
| hz(input); | hz, khz, number |
| khz(input); | hz, khz, number |
| String | |
| str(input); | anything not null |
| number | , int and uint |
| num(input); | px, pt, pc, in, mm, cm, em, rem, ex, ch, vw, vh, vmin, vmax, deg, rad, grad, turn, dpi, dpcm, dppx, s, ms, hz, khz, number |
| int(input); | as number |
| uint(input); | as number |
| ratio | number to fraction |
Parameters & Return
$unit: px (string)
convert to unit
$input: (number)
the input value ex 1rem
@error
Could not convert to #{$unit} – must be a valid CSS unit