css - 如何在 sass/scss 中转义字符串 css？

Question

我有一个包含 css 值的字符串，我想使用它但是 gruntjs 返回一个错误

Syntax error: Invalid CSS after "   @media ": expected media query (e.g. print, screen, print and screen), was "$from-smartphon..."

这是我的变量

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

我是这样调用它的:

    @media $from-smartphone-portrait {
        // Smartphone portrait
        body {
            font-size: 12px;
            line-height: 14px;
        }
    }

在 LESS 中，我可以在这种模式下逃脱它:

@from-smartphone-portrait:         ~"only screen and (min-width: 1px)";

如何在 SASS/SCSS 中制作同样的东西？

谢谢

Answer 1

您可以使用 unquote 函数:

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

将变量用于媒体查询定义:

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