KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I'm attempting to follow this tutorial on responsive layout design, but using SASS/SCSS as my base specification language. To that end, I have defined the 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, the output from sass into CSS format looks like this: h1 { font-size: 1.5 em; line-height: 1.167 em; margin-top: 1 em; } — with the unit separated from the value by a space. Chrome rejects these values as invalid, and only uses them if I manually go and remove the spaces myself. Is there a way to fix this problem by tweaking my SCSS, or by passing an option to sass ? So far, I have tried: placing the unit inside the calculation: ( font-size: ($h1_size / 16em) ) => syntax error ( font-size: (($h1_size)em / 16) => font-size: 24 em/16; which is the same problem I'm trying to fix
Tags (comma-separated)
Save Edits
Cancel