Можно ли поместить правила экрана @media в цикл for?

У меня есть правила экрана @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, чтобы я мог сократить свой код?

Это возможно с sass sass-lang.com/documentation/at-rules/control/for

Indraraj26 10.04.2021 06:45
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
1
14
1

Ответы 1

Насколько мне известно, вы не можете писать циклы в css. Однако вы можете в SASS. По ссылке ниже приведены примеры:

https://www.koderhq.com/tutorial/sass/iteration-control/

Другие вопросы по теме