修正Sass中的webkit文本笔划

Question

我正在使用Sass生成我的CSS样式表。我想要一致的排版，所以我想使用http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/中的CSS规则来细化基于Webkit的浏览器中的文本。我认为这样可以解决问题：

body
  -webkit-text-stroke: 1px transparent
@media only screen and (max-device-width:480px)
  body
    -webkit-text-stroke:0 black

第一部分工作正常，但第二部分（移动Safari的例外）呈现为

@media only screen and (max-device-width:480px) { }

哼！现在，显然Sass的下一个主要版本将支持括号，所以我可能只能放入CSS版本。但有没有办法以恰当的Sassy方式做我想做的事情？我已经尝试使用@media only转义\行，但这似乎导致Sass完全忽略该部分。

Answer 1

你需要在冒号和0之间留一个空格。

body
  -webkit-text-stroke: 1px transparent
@media only screen and (max-device-width:480px)
  body
    -webkit-text-stroke: 0 black

空间消除了选择器语法中属性语法的歧义。