CSS - Пользовательские свойства: дружеское руководство для начинающих

Здравствуйте, будущие маги CSS! ? Сегодня мы отправимся в увлекательное путешествие в мир пользовательских свойств CSS. Не волнуйтесь, если вы новички в программировании – я буду вашим доброжелательным проводником, и мы будем двигаться шаг за шагом. К концу этого руководства вы будете удивлять своих друзей своими суперсилами в CSS!

Что такое пользовательские свойства CSS?

Давайте начнем с основ. Пользовательские свойства CSS, также известные как переменные CSS, resemble magic containers, которые хранят значения, которые вы можете использовать throughout your stylesheets. Представьте их как маленькие коробочки, в которых вы можете хранить свои любимые цвета, размеры или любые другие значения CSS.

Why Use Custom Properties?

1. Повторное использование: Напишите один раз, используйте везде!
2. Гибкость: Измените значения в одном месте, увидите изменения везде.
3. Удобство обслуживания: Легче обновлять и управлять своими стилями.

Синтаксис: как объявлять и использовать пользовательские свойства

Давайте окунемся в код! Вот как объявить пользовательское свойство:

:root {
--my-favorite-color: #ff6347;
}

Здесь мы создаем пользовательское свойство под названием --my-favorite-color и задаем ему значение красивого томатного красного. Селектор :root означает, что эта переменная доступна throughout our entire document.

Чтобы использовать это свойство, мы используем функцию var():

.tomato-text {
color: var(--my-favorite-color);
}

Теперь любой элемент с классом tomato-text будет иметь наш любимый томатно-красный цвет!

Возможные значения: что можно хранить в пользовательских свойствах?

Пользовательские свойства ovat incredily versatile. You can store almost any CSS value in them:

Тип значения	Пример
Цвета	--main-color: #3498db;
Длины	--spacing: 20px;
Строки	--font-family: 'Arial', sans-serif;
Числа	--z-index: 100;
Вычисления	--width: calc(100% - 20px);

Применение: где можно использовать пользовательские свойства?

Короткий ответ? Везде! Вы можете использовать пользовательские свойства в любой стоимости CSS-свойства. Давайте рассмотрим несколько примеров:

:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--main-font: 'Helvetica', sans-serif;
--spacing: 20px;
}

.button {
background-color: var(--primary-color);
color: white;
font-family: var(--main-font);
padding: var(--spacing);
margin-bottom: var(--spacing);
}

.section {
border: 2px solid var(--secondary-color);
}

Пользовательские свойства CSS - Установка значений

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

// Установка значения пользовательского свойства с помощью JavaScript
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Пользовательские свойства CSS - Разбиение цветов

Вот классный трюк: вы можете разделить цвета на их компоненты и использовать пользовательские свойства для каждой части!

:root {
--red: 255;
--green: 99;
--blue: 71;
}

.tomato-background {
background-color: rgb(var(--red), var(--green), var(--blue));
}

Пользовательские свойства CSS - Тени

Пользовательские свойства делают сложные свойства, такие как box-shadow, намного более управляемыми:

:root {
--shadow-color: rgba(0, 0, 0, 0.2);
--shadow-offset-x: 5px;
--shadow-offset-y: 5px;
--shadow-blur: 10px;
}

.shadowed-box {
box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color);
}

Пользовательские свойства CSS - Градиенты

Градиенты становятся breeze с пользовательскими свойствами:

:root {
--gradient-start: #3498db;
--gradient-end: #2ecc71;
}

.gradient-background {
background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
}

Пользовательские свойства CSS - Сетка

Пользовательские свойства могут сделать ваши сеточные макеты более гибкими:

:root {
--grid-columns: 3;
--grid-gap: 20px;
}

.grid-container {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}

Пользовательские свойства CSS - Трансформации

Трансформации становятся более читаемыми и управляемыми:

:root {
--rotate-angle: 45deg;
--scale-factor: 1.2;
}

.transformed-element {
transform: rotate(var(--rotate-angle)) scale(var(--scale-factor));
}

Пользовательские свойства CSS - Конкатенация типов единиц

Вы можете даже combine пользовательские свойства с единицами измерения:

:root {
--base-size: 10;
}

.sized-element {
width: calc(var(--base-size) * 1px);
height: calc(var(--base-size) * 2px);
}

Пользовательские свойства CSS - Использование каскада

Пользовательские свойства уважают каскад CSS, что означает, что вы можете переопределять их для конкретных элементов:

:root {
--text-color: black;
}

.dark-theme {
--text-color: white;
}

p {
color: var(--text-color);
}

Пользовательские свойства CSS - :root

Мы использовали :root много раз. Это особый псевдокласс, представляющий корневой элемент дерева документов, обычно элемент <html>. Это отличное место для определения глобальных пользовательских свойств.

Пользовательские свойства CSS - Combining With !important

Пользовательские свойства можно combine с !important:

.override-color {
color: var(--text-color) !important;
}

Пользовательские свойства CSS - Запасные значения

Вы можете предоставлять запасные значения на случай, если пользовательское свойство не определено:

.fallback-example {
color: var(--undefined-color, blue);
}

Пользовательские свойства CSS - @property

Правило @property - это захватывающая новая функция, которая позволяет вам определять характеристики пользовательских свойств:

@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}

Это определяет пользовательское свойство --my-color, которое должно быть действительным значением цвета, не наследуется от родительских элементов и имеет начальное значение #c0ffee.

И вот мы и подошли к концу, мои дорогие студенты! Мы сегодня covered много ground, от основ пользовательских свойств CSS до некоторых продвинутых техник. Помните, ключ к овладению этими концепциями - практика. Так что идите вперед, экспериментируйте и создавайте потрясающие дизайны с вашими новыми суперсилами в CSS!

До свидания, счастливого кодирования! ??‍??‍?

Credits: Image by storyset