Question

我尝试在LESS中这样做 @ screen-lg：1200px;

@laptop：〜＆＃34;只有屏幕和（最小宽度：768px）和（最大宽度：@ {calc（screen-lg - 1px）}）＆＃34 ;;

目标直到1199px。但它并不喜欢它。

是否可以在字符串var？

中使用calc（）函数

感谢。

Answer 1

我认为你不需要calc。你可以得到你想要的东西：

1

@screen-lg: 1200px;
@screen-lg-max: (@screen-lg - 1);

@laptop: ~"only screen and (min-width: 768px) and (max-width: @{screen-lg-max})";

@media @laptop {
    color: red;
}

2

@screen-lg: 1200px;

@laptop: ~"only screen and (min-width: 768px) and (max-width:" (@screen-lg - 1) ~")";

@media @laptop {
    color: red;
}

3

（少于1.7.0）：

@screen-lg: 1200px;

.laptop(@styles) {
    @media screen and (min-width: 768px) and (max-width: (@screen-lg - 1)) {
        @styles();
    }
}

.laptop({
    color: red;
});

上面的所有三个片段都会产生以下CSS：

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  color: red;
}

Answer 2

必须在运行时评估媒体查询，通常在构建时编译较少的媒体查询。要做这种事情，你可能需要客户端Javascript版本http://lesscss.org/#client-side-usage，并且每次重新编译窗口时重新编译更少的脚本，所以可能没有必要使用less和you＆＃＆＃ 39;在Javascript中做得更快（更干净）。

话虽这么说，如果你试试这个，你可能不得不向后做（即在媒体查询中包装你的变量较少）。但我完全不确定这是否有道理。

Answer 3

由于Less在构建时被解析，因此您可以使用内置的数学功能。不需要计算。这很好用：

@screen-lg : 1200px;
@laptopsize: @screen-lg - 1px;

@laptop: ~"only screen and (min-width: 768px) and (max-width: @{laptopsize})";

@media @laptop {
    div{background: black;}
}

较少使用字符串var中的calc（）函数

3 个答案:

1

2

3