Комментарии 4
Вы обогатили мои знания о CSS, благодарю!
P.S. Не сарказм, про :root действительно не знал, CSS изучал давно и использую его крайне эпизодически.
P.S. Не сарказм, про :root действительно не знал, CSS изучал давно и использую его крайне эпизодически.
0
Можно немного облегчить CSS, добавив, помимо переменных для каждой планеты, общие. Например:
И тогда для каждой планеты будет общий слой с тенью, а рядом — с ее собственным цветом:
--shadow-layer: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black;
И тогда для каждой планеты будет общий слой с тенью, а рядом — с ее собственным цветом:
box-shadow: var(--shadow-layer), -5px 0px 10px -4px var(--earth-color);
0
Пользовательские свойства CSS также поддерживают значения по умолчанию, о чем стоит упомянуть. Например:
var(--color, #000)
0
Мне кажется, вы не полностью передали суть переменных; в вашем примере они решают только проблему нахождения определённого параметра в коде путём вынесения в рут. Эту идею можно было бы продолжить, решив так же проблему повторяющегося кода, внеся сами свойства css в соотвествующие классы, а изменять только сами переменные: codepen.io/deamondz/pen/qBdrVxw
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Изучаем переменные в CSS на практическом примере