CODEWITHSUNDEEP
sass
Tomek Buszewski
Tomek Buszewski

Reputation: 7935

Adding units to font-size and line-height variables in font shorthand

I try to learn SASS. In order to compile my files, I use Prepros app. It worked well until I started to use mixins. My code is as follows:

@mixin fontface($size) {
    font: ($size)px/($size*1.7)px "Roboto Slab", Georgia, sans-serif;
}

And I use it like this:

@include fontface(28);

When I compile it, I got spaces added to variables, like this:

font: 28 px/47.6 px "Roboto Slab", Georgia, sans-serif;

How can I change it? Is it because the app, or I am doing something wrong?

Upvotes: 0

Views: 444

Answers (1)

cimmanon
cimmanon

Reputation: 68319

The correct way to add a unit is via multiplication. However, you need to turn one of the values into a string in order to prevent division in the shorthand:

@mixin fontface($size) {
    font: #{$size * 1px}/#{$size * 1.7px} "Roboto Slab", Georgia, sans-serif;
}

Instead, you may want to just apply the unit before passing it to the mixin:

@mixin fontface($size) {
    font: #{$size}/#{$size * 1.7} "Roboto Slab", Georgia, sans-serif;
}

.foo {
  @include fontface(10px);
}

Or use a unitless line-height:

@mixin fontface($size) {
    font: #{$size}/1.7 "Roboto Slab", Georgia, sans-serif;
}

.foo {
  @include fontface(10px);
}

Upvotes: 6

Related Questions