tags:

views:

161

answers:

1

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.

A: 

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;
}
barraponto
Yes, it's precisely what is expected. But the doc also states "font: 10px/8px; // Plain CSS, no division". So I thought that it's possible to store this value in a variable and let sass know that it's a plain CSS declaration.The strange thing is, that this is working without division: "$font-normal: 14px/21px Arial, sans-serif;"But anyway, thanks for your answer!
aeby
see the updated documentation. you are now able to do it with # signs. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#division-and-slash
barraponto