css - 无法使用 Less PHP 解析媒体查询

Question

在我的 Less 文件中，我包含了一些我想在 Less 中用于媒体查询的变量：

@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";

在我的 css 中，我做这样的事情，例如：

@media @desktop{
    .test{
        font-size: 12px;
    }
}

当我尝试使用预处理器对其进行解析时，它会编译，但是当我使用 LessPHP 进行解析时，会出现以下错误：

PHP Fatal error:  Uncaught exception 'Exception' with message 'parse error: failed at `@media @desktop {`

Answer 1

如果您在文件顶部放置一个虚拟规则，例如：

a {}

@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";

@media @desktop{
    .test{
        font-size: 12px;
    }
}

在问题得到适当解决之前，它似乎有效。