Записки фронтендера
Не так давно в CSS появились переменные, но мало кто знает, что их ещё можно и типизировать!
Это стало возможным благодаря директиве @property:
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: red;
}
Или вот такому объявлению JS:
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "red",
});
1) При помощи свойства syntax мы указываем какой тип будет присвоен нашей переменной (полный список возможных значений и их комбинаций можно найти в спецификации).
2) inherits указывает, будет ли объявленная позже в коде переменная наследоваться потомками или нет.
3) initialValue задаёт значение по-умолчанию по аналогии со вторым параметром внутри var(--btn-bg, red);
Далее мы можем это использовать таким образом:
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: red;
}
.box {
--my-color: blue;
background-color: var(--my-color); /* Будет использован blue */
}
.box:hover {
--my-color: green; /* Будет использован green */
}
/* Дочерние элементы уже не получат эту переменную, т.к. мы ранее указали inherits: false */
.child {
background-color: var(--my-color); /* Будет использован red, значение по-умолчанию */
}
Если мы назначим переменную, значение которой будет отличаться от типа, указанного @property, то будет взято значение по-умолчанию:
.box {
--my-color: 42px; /* Тип не соответствует <color> */
background-color: var(--my-color); /* Будет использован red, значение по-умолчанию */
}
176 ·