less变量结合media query如何使用

Question

@padding: 20px;

@media screen and(max-width: 1900px) {
  @padding: 16px;
}

.section{
  padding: @padding;
}
.section1{
 padding: @padding;
}

比如一个组件有一个padding，希望小屏幕上的padding小一点。这种要怎么实现？

上面的写法不行。

Answer 1

less 中的变量概念是编译时变量，不能和运行时的变量所交互，其编译后既成了固定的 CSS 值。

这里可以用其他方式。

@padding: 20px;
@padding-sm: 16px;

.section{
  padding: @padding;
}
.section1{
 padding: @padding;
}

@media screen and(max-width: 1900px) {
  .section{
    padding: @padding-sm;
  }
  .section1{
    padding: @padding-sm;
  }
}

或者选用 CSS 变量。