2

I have a document that describes font sizes in pts, and I have for my purposes discovered that 2.8pt translates to 1rem in my use case.

So naturally I made an scss function to do the translations for me:

@mixin ptFontSize($pt) {
  font-size: ($pt/2.8)rem;
}

So that when the documentation says p.big should be 14pt, I can put this in my css:

p.big {
    @include ptFontSize(14);
}

However scss is outputting a space between the number and rem:

font-size: 5 rem;

And Chrome isn't liking that space being there. What's the right way to make this mixin function to output correctly into css?

TKoL
  • 13,158
  • 3
  • 39
  • 73

1 Answers1

0

You can use sass-rem if you wish to use an external library

https://www.npmjs.com/package/sass-rem

Usage SCSS

.demo {
  font-size: rem(24px); // Simple 
  padding: rem(5px 10px); // Multiple values 
  border-bottom: rem(1px solid black); // Multiple mixed values 
  box-shadow: rem(0 0 2px #ccc, inset 0 0 5px #eee); // Comma-separated values 
  text-shadow: rem(1px 1px) #eee, rem(-1px) 0 #eee; // Alternate use 
}

CSS

.demo {
  font-size: 1.5rem;
  padding: 0.3125rem 0.625rem;
  border-bottom: 0.0625rem solid black;
  box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee;
  text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee;
}
KLTR
  • 1,263
  • 2
  • 14
  • 37
  • I cannot rely on an external library, but I'd be glad to know the technique they use so that I can use my own function that does something similar. – TKoL Sep 05 '19 at 11:42
  • You can look at the implementation on their github https://github.com/pierreburel/sass-rem/blob/master/_rem.scss – KLTR Sep 05 '19 at 11:44