css - 在 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 的异常(exception))呈现给

@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

空格消除了属性语法与选择器语法的歧义。