css - How do I stop Sass adding spaces before units of measurement? -
this question has answer here:
- adding unit number in sass 1 answer
i'm attempting follow this tutorial on responsive layout design, using sass/scss base specification language.
to end, have defined following scss:
body { font: 100%/1.5; } h1 { $h1_size: 24; font-size: ($h1_size / 16)em; line-height:(28 / $h1_size)em; margin-top: (24 / $h1_size)em; }
unfortunately, output sass
css format looks this:
h1 { font-size: 1.5 em; line-height: 1.167 em; margin-top: 1 em; }
— unit separated value space. chrome rejects these values invalid, , uses them if manually go , remove spaces myself.
is there way fix problem tweaking scss, or passing option sass
?
so far, have tried:
- placing unit inside calculation:
- (
font-size: ($h1_size / 16em)
) => syntax error - (
font-size: (($h1_size)em / 16)
=>font-size: 24 em/16;
same problem i'm trying fix
- (
you can push em
$h1_size
definition, let divide 16 , have result in ems
.
if both sides of division in em
, result unitless. can multiply 1em
unit back, if needed.
h1 { $h1_size: 24em; font-size: ($h1_size / 16); line-height:(28em / $h1_size); margin-top: (24em / $h1_size * 1em); }
multiplying 1em
can make closer original example work. can keep things unitless, multiply 1em
when want unit appear. avoids of pointless em
proliferation in first example:
h1 { $h1_size: 24; font-size: ($h1_size / 16 * 1em); line-height:(28 / $h1_size); margin-top: (24 / $h1_size * 1em); }
which way makes more sense depends on if output in 1 unit, or sorts of different ones (including none).
Comments
Post a Comment