Css 如何为媒体查询生成名为@phone的变量？

我需要使我的页面响应最大宽度为500px的手机。通常我会使用

@媒体屏幕和（最大宽度：500px）

，但他们希望我使用更少的内容，并创建一个包含媒体字符串的

@phone

变量。现在我将媒体查询嵌套在

@phone

中，如下所示：

@phone {
    @media screen and (max-width: 500px) {
    }
}

但我得到了一个错误，上面写着“在@phone的规则中未知”，所以推测这是错误的。我至少在球场上吗？需要改变什么？

希望这有帮助

@phone: ~"only screen and (max-width:500px)";
@media @phone {
    body {
        font-size: 30px;
    }
}

编译上述代码后，结果如下

@media only screen and (max-width:500px) {
     body {
         font-size: 30px;
    }
}

希望这有帮助

@phone: ~"only screen and (max-width:500px)";
@media @phone {
    body {
        font-size: 30px;
    }
}

编译上述代码后，结果如下

@media only screen and (max-width:500px) {
     body {
         font-size: 30px;
    }
}