Function to convert letter size to SASS

Asked

Viewed 55 times

1

Good morning, I would like to know how to do a function within SASS that receives a value in pt and convert to px. I know that there is a specific account for the conversion and also that you can use a function() but is it possible to make a standard function for this conversion of pt for px? If yes, how can I do or begin?

Thank you very much.

sass

  • Related: http://answall.com/questions/27133

  • Dude, take a look at this: https://www.sitepoint.com/converting-typographic-units-sass/ might help you, there’s a function there that does this conversion, compared to the pattern I find difficult because each font has its own dimensions.

2 answers

2


Solution taken 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)
      }

   }
}

-1

Use in the SCSS:

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em;
}

Use of 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: https://css-tricks.com/snippets/sass/px-to-em-functions/

Browser other questions tagged sass

You are not signed in. Login or sign up in order to post.