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

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

Пользовательские свойства CSS . Пользовательские свойства CSS также называются переменными CSS или каскадными переменными. Эти объекты содержат определенные значения, которые будут повторно использоваться во всем документе, и к ним можно получить доступ с помощью функции var() (например, color:(–primary-color);). Имя свойства с префиксом – отображает пользовательские свойства, и их значение будет использоваться в других объявлениях с помощью функции var().

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

Синтаксис:

• Для переменной:

var( --custom-name, value )

• Для пользовательских свойств:

--custom-name: values;

Пример 1. В приведенном ниже примере кода мы увидим, как работают пользовательские свойства CSS.

Выход:

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

Синтаксис:

$variable-name:variable-property;

Пример 2. В приведенном ниже примере кода мы увидим, как мы можем использовать переменные препроцессора с помощью переменных SCSS.

Код СКСС:

$button-color:green;
.title{
    color:$button-color;
}

Скомпилированный CSS-код:

.title {
    color: green; 
}

Выход:

Разница между пользовательскими свойствами CSS и переменной препроцессора CSS: