最近,我一直在将CSS重构为SASS样式表。我正在使用VS2012 的Mindscape Web Workbench扩展,每次您保存SCSS时都会重新生成CSS。我从类似于以下代码开始:
/* Starting point: */
h1 { font-size: 1.5em; /* 24px ÷ 16px */ }
然后我尝试首先将其重构为:
/* Recfator: */
h1 { font-size: (24px / 16px)em; }
但这不幸地产生:
/* Result: */
h1 { font-size: 1.5 em; } /* doesn't work, gives "1.5 em" */
请注意多余的空间,我不想在那里。我已经尝试了几种选择,以下是一些选择:
h1 { font-size: (24/16)em; } /* doesn't work, gives "1.5 em" */
h2 { font-size: 24 / 16em; } /* doesn't work, gives "24/16em" */
h3 { font-size: (24px / 16px) * 1em; } /* works but "* 1 em" feels unnecessary */
h4 { font-size: (24em) / 16; } /* works, but without "px" it's not
really conveying what I mean to say */
我也尝试过将这些变量与变量一起使用(因为无论如何我都想要这些变量),但这并没有太大改变。为了使示例中的示例更加简洁,我省略了变量。但是,我很乐意接受一个依靠使用变量(干净的方式)的解决方案。
I've gone through the relevant SASS documenation on '/', and appreciate that this is a tough one for SASS because the '/' character already has a meaning in basic CSS. Either way, I was hoping for a clean solution. Am I missing something here?
PS. This blogpost does offer one solution, using a user defined function. That seems a bit heavy-weight though, so I'm interested if there's "cleaner" solutions in line with my attempts above. If someone can explain the "function approach" is the better (or even only) solution then I'll accept that as an answer too.
PS. This related question seems to be about the same thing, though that one specically wants to do further calculations. The accepted answer there is my third workaround (multiplying by 1em
), but I'd love to know if there's a different (cleaner) way if I'm willing to forego the ability to do further calculations. Perhaps the method mentioned in said question ("interpolation") is useful for me?
Bottom line: how can you cleanly append the unit type (e.g. em
) to the result of a calculation in SASS?
您可以尝试以下任一方法:
要么
$size
您的计算结果在哪里。