CSS-переменные

Сегодня мы поговорим о CSS-переменных, которые становятся все более популярными в веб-разработке. Они позволяют нам делать наш код более удобным, читабельным и гибким. На этом уроке мы разберем, что такое CSS-переменные, как их использовать, а также рассмотрим примеры их применения в реальных проектах. Давайте начнем!

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

CSS-переменные, также известные как пользовательские свойства, позволяют нам хранить значения, которые можно использовать в различных местах нашего CSS-кода. Это помогает избежать дублирования и упрощает внесение изменений

Синтаксис объявления переменных

Чтобы объявить CSS-переменную, нужно использовать следующий синтаксис:

:root {
    --имя-переменной: значение;
}

Значение переменной может быть любым допустимым CSS-значением, например, цветом, размером шрифта, отступами и т.д. Например:

:root {
    --main-color: #3498db;
    --font-size: 16px;
}

Здесь мы объявили две переменные: --main-color и --font-size.

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

Теперь, когда мы объявили переменные, давайте посмотрим, как их использовать в стилях. Для этого мы применяем функцию var():

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

Примеры использования переменных в различных селекторах

Переменные можно использовать в любом месте CSS, где это уместно. Например, мы можем использовать их в селекторах, классах и даже в медиа-запросах:

h1 {
    color: var(--main-color);
}

.button {
    background-color: var(--main-color);
    font-size: var(--font-size);
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

Обратите внимание, что переменные подчиняются каскадности, и их можно переопределять в разных контекстах.

Примеры применения переменных в проектах

Пример 1: Темная и светлая темы

CSS-переменные отлично подходят для реализации темной и светлой тем. Мы можем объявить переменные для цветов фона и текста и легко переключать их:

:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

[data-theme="dark"] {
    --background-color: #000000;
    --text-color: #ffffff;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

Теперь, чтобы переключить тему, достаточно изменить атрибут data-theme на dark в HTML

Пример 2: Адаптивный дизайн

CSS-переменные могут помочь в создании адаптивных стилей. Например, мы можем использовать переменные для изменения размеров шрифтов и отступов на разных устройствах:

:root {
    --font-size: 16px;
    --padding: 10px;
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
        --padding: 8px;
    }
}

h1 {
    font-size: var(--font-size);
    padding: var(--padding);
}

Пример 3: Легкость в изменении цветовой схемы

Представьте, что вы хотите изменить цветовую схему всего сайта. С помощью CSS-переменных это можно сделать всего за несколько строк кода. Например:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

.button {
    background-color: var(--primary-color);
}

.button:hover {
    background-color: var(--secondary-color);
}

Теперь, чтобы изменить цвет кнопки, достаточно изменить значение переменной --primary-color.

Интерактивная часть

Теперь давайте перейдем к практике! У вас есть задание: создайте простую страницу с использованием CSS-переменных. Например, измените цвет фона и текст с помощью переменных.

Пример задания:

1. Создайте HTML-документ с заголовком и кнопкой.
2. Используйте CSS-переменные для определения цвета фона и цвета текста.
3. Поиграйте с изменением значений переменных и посмотрите, как это влияет на вашу страницу

Сегодня мы узнали о CSS-переменных, их синтаксисе и применении. Мы рассмотрели примеры использования переменных в реальных проектах и даже поработали над интерактивным заданием. Надеюсь, вы увидели, как CSS-переменные могут упростить вашу работу и сделать код более гибким.

Если у вас есть вопросы, не стесняйтесь задавать их. В следующем уроке мы поговорим о других интересных аспектах CSS. Спасибо за внимание, и до встречи на следующем занятии!

Дополнительные материалы

• CSS-переменные на MDN

Вопросы для обсуждения

• Как вы думаете, какие еще примеры использования CSS-переменных можно привести?
• Какие сложности могут возникнуть при использовании переменных в реальных проектах?