开发者

Correcting webkit text stroke in Sass

开发者 https://www.devze.com 2022-12-17 07:34 出处:网络
I\'m using Sass to generate my CSS stylesheets. I want consistent typography, so I want to use the CSS rules from http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/

I'm using Sass to generate my CSS stylesheets. I want consistent typography, so I want to use the CSS rules from http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/ to thin the text in Webkit-based browsers. I thought this would do the trick:

body
  -webkit-text-stroke: 1px transparent
@media only screen and (max-devic开发者_Python百科e-width:480px)
  body
    -webkit-text-stroke:0 black

The first part works fine, but the second part (the exception for mobile Safari) renders to

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

Hmm! Now, apparently the next major release of Sass will support brackets, so I'll probably just be able to drop in the CSS version then. But is there a way to do what I'm trying to do in a properly Sassy way? I already tried escaping the @media only line with a \, but that seemed to cause Sass to ignore that section altogether.


You need to have a space between the colon and 0.

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

The space disambiguates the property syntax from selector syntax.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号