开发者

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

开发者 https://www.devze.com 2022-12-31 11:43 出处:网络
Is there a way to store the font-size/line-height in a Sass variable like this: $font-normal: 14px/21px;

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;
0

精彩评论

暂无评论...
验证码 换一张
取 消