Главная3 курс UX/UI1 занятие. CSS переменные. Препроцессор CSS (Sass)1. Переменные в CSS
1 занятие

1. Переменные в CSS

Что такое переменные CSS

Переменные CSS – это пользовательские свойства, которые позволяют веб-разработчикам сохранять значения, которые потом они смогут многократно использовать в стилевом оформлении. Например, вы можете объявить стиль и размер шрифта, цвет фона и в дальнейшем применять их к различным элементам вашей кодовой базы, например, заголовки, абзацы и блоки.

Для чего нужны переменные CSS? Вот несколько соображений на эту тему:

  • Упрощает обновление кода. После того, как вы объявите переменную, вы сможете использовать это стилевое оформление многократно без необходимости обновлять каждый элемент вручную.
  • Сокращает число повторений. По мере того, как ваша кодовая база будет расти, вы обнаружите, что у вас есть много подобных классов и элементов. Вместо того, чтобы писать код CSS для каждого элемента, вы можете просто воспользоваться переменными CSS.
  • Делает ваш код более удобным в сопровождении. Сопровождение кода – это важный элемент, особенно если вы хотите, чтобы ваш бизнес функционировал непрерывно.
  • Улучшает читаемость. Современный мир поощряет сотрудничество. Использование переменных CSS позволяет создать компактную и читаемую кодовую базу.
  • Упрощает поддержание единого стиля. По мере того, как ваш исходный код будет расти, а размер приложения будет увеличиваться, переменные CSS могут помочь вам поддерживать единый стиль. Например, вы можете объявить поля, отступы, стиль шрифта и цвета, которые будут использоваться в ваших кнопках на веб-сайте.

Как объявлять переменные CSS?

Так как уже вы знаете, что такое переменные CSS и для чего они нужны, теперь мы можем продемонстрировать, как их можно объявить.

Чтобы объявить переменную CSS, напишите имя элемента, затем два тире (-), нужное имя и значение. Вот так выглядит базовый синтаксис:

element {
--variable-name: value;
}

Область видимости переменных CSS

Переменные CSS могут быть локальными (то есть доступными внутри определенного элемента) или глобальными (то есть доступными во всей таблице стилей).

Локальные переменные

Локальные переменные добавляются к конкретным селекторам. Например, вы можете добавить их к кнопке. Вот пример:

.button {
    --button-bg-color: #33ff4e;
 }

Теперь переменная, отвечающая за цвет фона, доступна в селекторе button и его дочерних элементах.

Глобальные переменные

Объявленные глобальные переменные можно использовать с любым элементом вашего кода. В данном случае, чтобы объявить глобальные переменные, мы воспользуемся псевдо-классом :root:

:root {
    --primary-color: grey;
    --secondary-color: orange;
    --font-weight: 700:
  }

Как использовать переменные CSS?

:root {
    --primary-color: grey;
    --secondary-color: orange;
    --font-weight: 700:
    --font-size: 16px;
    --font-style: italic;
  }

  body {
    background-color: var(--primary-color);
    font-size: var(--font-size);
  }

  h1 {
    color: var(--secondary-color);
    font-style: var(--font-style)
  }

  h2 {
    font-weight: var(--font-weight)
  }

  p {
    font-size: calc(var(--font-size) * 1.2);
  }
Далее