Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

sass

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.

like image 369
Reto Aebersold Avatar asked Dec 23 '22 03:12

Reto Aebersold


2 Answers

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;
}
like image 157
Capi Etheriel Avatar answered Jan 05 '23 11:01

Capi Etheriel


I use:$somevar: unquote("14px/17px");

like image 29
Boris Astanin Avatar answered Jan 05 '23 09:01

Boris Astanin