Store CSS font-size/line-height in Sass variable

css, sass

Solution

according to the SCSS reference in http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#division_and_slash that is precisely what is expected. try putting it into a mixin:

@mixin fontandline{
  font: 14px/12px;
}

then, whenever you need to use it again, just write it like that:

@include fontandline;

see http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins for more information.

EDIT: according to latest documentation (see link above) the following code

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

should be compiled to

p {
  font: 12px/30px;
}

Problem

Is there a way to store the font-size/line-height in a Sass variable like this: ``` $font-normal: 14px/21px; ``` Using this declaration I get a division as described in the documentation. Is there a way to avoid the division? Note: I use the scss syntax.

Original source