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.
精彩评论