less 中使用变量结合 media query

在 less 中，可以使用变量来实现代码的可重用性。结合 media query，我们可以在不同屏幕尺寸下动态调整样式。

问题：

希望在小屏幕上将某个组件的内边距减小。使用如下代码时，发现不起作用：

@padding: 20px;

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

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

答案：

less 中的变量是编译时变量，不能交互运行时值。编译后，变量的值就固定为特定的 css 值。因此，上面的代码不起作用。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

有几种方法可以解决这个问题：

方法 1：使用多个变量

我们可以使用多个变量来表示不同屏幕尺寸下的 padding 值：

@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;
  }
}

方法 2：使用 css 变量

也可以考虑使用 css 变量，它可以在运行时动态修改值：

:root {
  --padding: 20px;
}

.section{
  padding: var(--padding);
}
.section1{
 padding: var(--padding);
}

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