less变量如何随屏幕宽度变化?

Question

@xw: 10vw;
@media screen and (min-width: 1000px) {
  @xw: 20px;
}
.test {
  font-size: @xw;
}

譬如这样怎么写才能使得变量@xw可以根据屏幕宽度变化，想把这个xw当作一个全局的基准值来使用，但是像上述那样写无论什么宽度都只会是10vw。

Answer 1

不管是 Less 还是 Scss 或者 Stylus，他们的变量都在被编译成CSS的时候就消失了。变成一个固定的CSS属性值。这些CSS预处理器并不会在客户端运行，所以也就是我们为什么会把他们放到 开发依赖 当中。

如果你想要在浏览器环境按照不同业务场景去变更的话，可以使用 CSS 变量。
只要你提前定义好上就可以去随时修改和使用它（JS来控制需要放在 body 的行内样式中）。

例如说你的需求

:root{
  --xw: 10vw;
}
@media (min-width: 1000px){
  body{
      --xw: 20px;
  }
}
.test{
  font-size: var(--xw)
}

Answer 2

因为Less只是一个“预处理器”，因为它没有查看浏览器的媒体状态来进行预处理, 所以@media在编译时对它没有任何意义，@media状态仅在预处理之后才相关，此时@xw已经计算了这就是为什么一直都是10vw
如果非要作为一个全局的基准值 解决办法：

1. css变量 var(--xw)
2. @xw:xxxxrem ， @media里面设置 html { font-size: xxxpx }

Answer 3

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp

.test {font-size:clamp(20px, 10vw, 10vw);}