LESS中如何在媒体查询字符串中使用变量执行运算？

嘿，我明白你的问题了——想在LESS里用变量存屏幕分辨率，还得在媒体查询里结合运算对吧？之前直接在字符串里引用变量没生效，其实是没用到LESS正确的插值语法，我来给你讲清楚怎么弄：

1. 直接在媒体查询中使用变量+运算（最常用） #

如果你不需要把整个媒体查询条件存成变量，直接在@media里用变量和运算就可以，LESS会自动帮你计算结果：

// 定义基础断点变量
@screen-sm: 768px;
@screen-md: 992px;

// 直接在媒体查询里做运算
@media screen and (min-width: @screen-sm) and (max-width: @screen-md - 1px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

编译后的CSS会自动把@screen-md -1px计算成991px，生成：

@media screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

2. 把媒体查询条件存成变量（适合复用复杂条件） #

如果你想把整个媒体查询语句存成@myStatement这样的变量，就需要用到插值语法@{变量名}加上转义字符~，让LESS正确解析变量和运算：

// 定义变量并提前计算好运算结果（或者在插值里计算）
@screen-lg: 1200px;
@screen-lg-max: @screen-lg - 1px; // 提前运算，更清晰

// 用转义字符串+插值定义媒体查询变量
@myStatement: ~"screen and (max-width: @{screen-lg-max})";

// 使用这个变量
@media @myStatement {
  .content {
    padding: 0 20px;
  }
}

这里的~是告诉LESS：把这个字符串当作有效的CSS表达式处理，而不是普通字符串；@{screen-lg-max}则是把变量的值插入到字符串中，替换掉占位符。

如果想直接在字符串里做运算，也可以这么写（不过提前定义运算后的变量可读性更好）：

@screen-xl: 1400px;
@myStatement: ~"screen and (min-width: @{screen-xl} + 1px)";

@media @myStatement {
  .sidebar {
    display: none;
  }
}

编译后会生成@media screen and (min-width: 1401px) { ... }

为什么你之前的写法无效？ #

大概率是你直接把变量写在普通字符串里，比如@myStatement: "screen and (max-width: @screen-sm)";——这种情况下LESS会把@screen-sm当作字符串的一部分，不会解析成变量的值。必须用@{变量名}来插值，再配合~转义，才能让LESS正确识别变量和运算。

内容的提问来源于stack exchange，提问作者fablexis