css - 无法使用更少的 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;
    }
}

在问题得到妥善解决之前，它似乎一直有效。