How can I escape string css in sass/scss?

Question

I have a string that contain a css value and I want to use it but with gruntjs return me an error ``` Syntax error: Invalid CSS after " @media ": expected media query (e.g. print, screen, print and screen), was "$from-smartphon..." ``` this is my var ``` $from-smartphone-portrait: "only screen and (min-width: 1px)"; ``` and this is how I call it: ``` @media $from-smartphone-portrait { // Smartphone portrait body { font-size: 12px; line-height: 14px; } } ``` in LESS I can escape it in this mode: ``` @from-smartphone-portrait: ~"only screen and (min-width: 1px)"; ``` How can I make the same thing in SASS/SCSS? Thanks

Accepted Answer

You can make use of the `unquote` function:

```
$from-smartphone-portrait: unquote("only screen and (min-width: 1px)");
```

To use the variable for the media query definition:

```
@media #{$from-smartphone-portrait} {
```

How can I escape string css in sass/scss?

Solution

Problem