Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

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

Доступ к DOM позволяет создавать переменные, сохранять их и повторно использовать в таблице стилей.

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

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

Возьмем следующий пример файла HTML и файла CSS, в котором не используются переменные CSS.

HTML:

HTML>
<HTMLязык="ан">
<голова>
<заголовок>Переменные CSS — варианты кнопокзаголовок>
<связьотн.="таблица стилей"href="Переменные.css" />





instagram viewer



голова>
<тело>
<див>
<h1>CSS-переменныеh1>
<див>

CSS:

.btn {
набивка: 1бэр 1.5рем;
 фон: прозрачный;
 вес шрифта: 700;
 красный цвет;
}

Вот как должна выглядеть ваша страница:

.btn класс, используемый в приведенной выше таблице стилей, не является динамическим и заставляет вас создавать отдельный класс для настройки отдельных кнопок. Создание красивых веб-сайтов требует от вас динамического стиля внешнего интерфейса. Реализация кнопок таким образом просто затруднит выполнение этой задачи.

Как и в большинстве языков программирования, вам необходимо инициализировать и заменить переменные CSS.

Чтобы инициализировать переменную CSS, поставьте перед именем переменной двойной дефис:

:корень{
/*переменная CSS*/
--имя_переменной: значение;
}

Вы можете инициализировать переменную где угодно, но учтите, что вы сможете использовать эту переменную только внутри инициализированного селектора. Из-за этого переменные CSS традиционно инициализируются внутри корневого селектора. Это нацелено на элемент DOM самого высокого уровня и позволяет переменным быть доступными для всего HTML-документа в глобальном масштабе.

Чтобы заменить переменную в вашем стиле CSS, вы будете использовать переменная() свойство:

:корень {
/*переменная CSS*/
 --начальный: #900c3f;
 --вторичный: №ff5733;
}
.btn {
набивка: 1бэр 1.5рем;
 фон: прозрачный;
 вес шрифта: 700;
 цвет: вар(--начальный);
 фоновый цвет: вар(--вторичный);
}
.sub-primary {
 цвет: вар(--вторичный);
 фоновый цвет: вар(--начальный);
}

Корневой селектор содержит две переменные: --начальный и --вторичный. Затем обе переменные подставляются в .btn class как цвет и цвет фона соответственно.

Используя переменные, вы можете гораздо проще стилизовать отдельные элементы. Повторно используя переменные, вы можете быстро изменить значение один раз, чтобы обновлять его каждый раз.

переменная() свойство также может принимать второй аргумент. Этот аргумент действует как резервное значение для первого аргумента в ситуации, когда первый не определен или недействителен.

Например:

:корень {
 --начальный: #900c3f;
 --вторичный: №ff5733;
}
.btn {
набивка: 1бэр 1.5рем;
 фон: прозрачный;
 вес шрифта: 700;
 цвет: вар(--первичный, синий);
}

В этом примере замените --начальный переменная в цвет стиль. Если по какой-либо причине это значение не работает, таблица стилей будет использовать второе значение в качестве запасного варианта. Вы также можете использовать другую переменную CSS в качестве запасного значения.

Манипулирование и переопределение переменных CSS с помощью JavaScript

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

Важно отметить, что изменения, сделанные с помощью JavaScript, будут применяться только к текущему сеансу. Вы должны либо обновить исходный код, либо сохранить новое значение на клиенте, например, в файле cookie, чтобы сохранить изменения.

Вот пример использования JavaScript для обновления значения переменной CSS.

HTML:

HTML>
<HTMLязык="ан">
<голова>
<заголовок>Переменные CSS — варианты кнопокзаголовок>
<связьотн.="таблица стилей"href="Переменные.css" />
<сценарий>
функцияизменить цвет() {
// Получить элемент, для которого вы хотите изменить переменную
константа мойЭлемент = документ.querySelector(":корень");
// Получить текущее значение переменной
позволять currentValue = getComputedStyle (myElement).getPropertyValue(
"--вторичный"
 );
 // Набор в новыйценитьдля в переменная
мойЭлемент.стиль.setProperty("--вторичный", "#DAF7A6");
 }
сценарий>
голова>
<тело>
<див>
<h1>CSS-переменныеh1>
<див>

CSS:

:корень {
 --начальный: #900c3f;
 --вторичный: №ff5733;
}
.btn {
набивка: 1бэр 1.5рем;
 фон: прозрачный;
 вес шрифта: 700;
}
.sub-primary {
 цвет: вар(--начальный);
 фоновый цвет: вар(--вторичный);
}

В этом коде JavaScript изменить цвет() Функция обновляет цвет первой кнопки, когда пользователь нажимает на нее.

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

Перед нажатием кнопки:

После нажатия кнопки:

Вы также можете использовать JavaScript для создания новых переменных CSS или их полного удаления.

Например:

// Создавать а новыйпеременная
документ.documentElement.style.setProperty('--новый-цвет', 'синий');
// Удалить переменную
документ.documentElement.style.removeProperty('--новый-цвет');

Использование переменных CSS с препроцессорами

Использование переменных во внешнем интерфейсе изначально было достигнуто с помощью препроцессоров CSS, таких как SASS, LESS и Stylus.

Препроцессоры CSS предназначены для разработки кода, расширяющего основные возможности стандартного CSS. Затем скомпилируйте этот код в стандартный CSS для понимания браузером, как как TypeScript работает с JavaScript.

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

Вы можете определить переменную SASS $ основной цвет и используйте его, чтобы установить значение переменной CSS. Затем используйте переменную CSS в обычном классе стиля.

Вы также можете использовать функции SASS для управления значениями переменных CSS.

Например:

:корень {
 --primary: $основной цвет;
 --вторичный: осветлить(вар(--начальный), 20%);
}
.btn {
 цвет: вар(--начальный);
 фоновый цвет: вар(--вторичный);
}

Здесь функция SASS осветлить () манипулирует стоимостью --начальный чтобы получить значение для --вторичный.

Обратите внимание, что переменные SASS недоступны для JavaScript. Поэтому, если вам нужно манипулировать значениями ваших переменных во время выполнения, вы должны использовать переменные CSS.

Используя вместе переменные CSS и препроцессоры, вы можете воспользоваться обоими преимуществами, такими как использование мощные функции препроцессора, такие как циклы и функции, и функции переменных CSS, такие как CSS каскадный.

Советы по использованию переменных CSS в веб-разработке

Вот несколько важных советов, которые помогут вам лучше использовать переменные CSS.

Начните с четкого соглашения об именах

Выберите соглашение об именах для ваших переменных, которое сделает их простыми для понимания и использования. Например, используйте такой префикс, как --цвет- для цветовых переменных или --интервал- для переменных интервалов.

Используйте переменные в медиа-запросах, чтобы упростить настройку дизайна для разных размеров экрана.

Воспользуйтесь преимуществами каскадной природы CSS

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

Используйте переменные CSS с осторожностью

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

Проверьте свои переменные

Переменные CSS — это уникальный способ написать понятный и удобный для сопровождения код в вашей таблице стилей.

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