Css 是否可以将@media屏幕规则放入for循环中？

我的css文件中有@media屏幕规则，它们如下所示：

@media screen and (min-width: calc((180px + 40px) * 1 - 40px)) {
  #main-form {
    width: calc((180px + 40px) * 1 - 40px);
  }
  #main-projects {
    width: calc((180px + 40px) * 1);
  }
}

@media screen and (min-width: calc((180px + 40px) * 2 - 40px)) {
  #main-form {
    width: calc((180px + 40px) * 2 - 40px);
  }
  #main-projects {
    width: calc((180px + 40px) * 2);
  }
}

@media screen and (min-width: calc((180px + 40px) * 3 - 40px)) {
  #main-form {
    width: calc((180px + 40px) * 3 - 40px);
  }
  #main-projects {
    width: calc((180px + 40px) * 3);
  }
} 

正如您所看到的，除了乘法增加之外，它们是相同的

---

有没有可能将它们放入css文件中的for循环中，这样我就可以减少代码？

据我所知，您不能在css中编写for循环。但是，您可以在SASS中使用。查看下面的链接以获取示例：

---

据我所知，您无法在css中编写for循环。但是，您可以在SASS中使用。查看下面的链接以获取示例：

使用sass是可能的使用sass也是可能的