@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