Correcting webkit text stroke in Sass

Question

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-device-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.

Answer 1

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.