Good morning, I would like to know how to do a function within SASS that receives a value in pt and converts to px . I know that there is a specific account for the conversion and also that you can use function() but can you do a standard function for this conversion from pt to px ? If so, how do I get started?
Thank you very much.
Solution removed from Converting Your Typographic Units with Sass :
@function convert($value, $currentUnit, $convertUnit){
@if $currentUnit == px{
@if $convertUnit == ems{
@return $value / 16 + 0em;
}
@else if $convertUnit == percent{
@return percentage($value / 16);
}
}@else if $currentUnit == ems{
@if $convertUnit == px{
@return $value * 16 + 0px;
}
@else if $convertUnit == percent{
@return percentage($value);
}
}@else if $currentUnit == percent{
@if $convertUnit == px{
@return $value * 16 / 100 + 0px;
}
@else if $convertUnit == ems{
@return $value / 100 + 0em;
}
}@else if $currentUnit == pts{
@if $convertUnit == px{
@return $value * 1.3333 +0px;
}
@else if $convertUnit == ems{
@return $value / 12 + 0em;
}
@else if $convertUnit == percent{
@return percentage($value / 12)
}
}
}
Use in SCSS:
$browser-context: 16; // Default
@function em($pixels, $context: $browser-context) {
@return #{$pixels/$context}em;
}
Using the function in ():
h1 {
font-size: em(32);
}
p {
font-size: em(14);
}
The result of CSS will be:
h1 {
font-size: 2em;
}
p {
font-size: 0.875em;
}
Source: link