Store CSS font-size/line-height in Sass variable
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.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; }
I use:$somevar: unquote("14px/17px");
To elaborate on @capi-etheriel 's answer:
add this to the top of the scss file:
@use "sass:list";
and than define $font-normal as:
$font-normal: list.slash(14px, 21px);
For font:
to work you have to add at minimum a font-family:
p {
font: $font-normal sans-serif;
}
But I assume you realized that.
This will generate in css:
p: 14px/21px sans-serif;
精彩评论