Question

我让他在一个主要的.less文件中跟随：

@media only screen and (min-width: 47.0625em) {
    @import "_grid.less";
    @import "_768up.less";
} 

@media only screen 
and (min-device-width: 47.0625em) 
and (max-device-width: 64.375em) {
    @import "_768to1030.less";
}

_grid.less中的变量集在_768up.less和_768to1030.less中使用，但是当导入位于其上方时，它会在编译时抛出错误。

如果我将_grid.less导入移动到最后一个媒体查询的第一位，它就不会抛出错误，但是在_768up.less中使用该变量的所有元素都没有被设置样式。 ..

这是一个真正的益智游戏。

P.S。我使用CodeKit for OS X作为我的编译器。

Answer 1

首先，您现在可以将@import语句和媒体查询结合起来，不像那样：

@import "responsive/mobile" only screen and (min-width: 47.0625em) {
    /* CSS GETS IMPORTED INTO A MEDIA QUERY */
}

我偶然发现了bug report for less.js ...问题在1.4中已经关闭，但仍有编译器是端口（无点）或使用旧版本。如果有可能的更新可能会解决问题。

您应该尝试直接使用less.js并查看是否发生错误。如果没有，那么它就是CodeKit编译器版本。

Answer 2

可变范围是您的问题

如果两者都使用了变量，则必须将该变量设置在@media块的“外部”，以便它们都可以访问它。所以你需要这样做：

@import "_grid.less";

@media only screen and (min-width: 47.0625em) {
    @import "_768up.less";
} 

@media only screen 
and (min-device-width: 47.0625em) 
and (max-device-width: 64.375em) {
    @import "_768to1030.less";
}

或者您需要将这些公共变量分离到另一个文件，然后执行此操作：

@import "_commonVariables.less";

@media only screen and (min-width: 47.0625em) {
    @import "_grid.less";
    @import "_768up.less";
} 

@media only screen 
and (min-device-width: 47.0625em) 
and (max-device-width: 64.375em) {
    @import "_768to1030.less";
}

或者您需要重复自己以获取@media块的范围内的变量：

@media only screen and (min-width: 47.0625em) {
    @import "_grid.less";
    @import "_768up.less";
} 

@media only screen 
and (min-device-width: 47.0625em) 
and (max-device-width: 64.375em) {
    @import "_grid.less";
    @import "_768to1030.less";
}

变量较小，不通过导入获取

2 个答案:

可变范围是您的问题