-1

我让他关注一个主要的 .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不会被设置样式......

这是一个真正的谜题。

PS 我使用 OS X 的 CodeKit 作为我的编译器。

4

2 回答 2

1

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

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

我偶然发现了这个关于 less.js 的错误报告……这个问题在 1.4 中关闭，但仍有一些编译器是端口（无点）或使用旧版本。如果有更新，也许可以解决这个问题。

您应该尝试直接使用less.js，看看那里是否出现错误。如果不是，那么就是 CodeKit 编译器版本破坏了一些东西。

于 2013-08-03T19:34:55.353 回答
0

变量范围是你的问题

如果您在两者中都使用了一个变量，则必须将该变量设置在@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";
}
于 2013-08-03T20:05:52.470 回答