У меня есть правила экрана @media в моем файле css, и они выглядят следующим образом:
@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);
}
}
Как видите, они идентичны, за исключением увеличения числа умножения.
Можно ли поместить их в цикл for в файле css, чтобы я мог сократить свой код?
Насколько мне известно, вы не можете писать циклы в css. Однако вы можете в SASS. По ссылке ниже приведены примеры:
Это возможно с sass sass-lang.com/documentation/at-rules/control/for