Автор CSS-фреймворка Codyhouse Себастьяно Гирейро опубликовал пост о том, почему они используют CSS-переменные вместо переменных SASS — "Why we prefer CSS Custom Properties to SASS variables".

Себастьяно пишет про несколько случаев, где CSS-переменные полезны. Например, можно определить переменные, которые задают цвета для разных тем и затем использовать их для фона и цвета текста. В отличие от SASS в CSS-переменных значения могут перекрываться, таким образом одна и та же переменная может использоваться для разных тем. Это помогает избавиться от дублирования деклараций, которые возникают при использовании SASS-переменных. Ещё понравился пример использования CSS-переменных для типографики, с помощью которых задаются степень масштабирования и базовый размер шрифта.

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

#css #customproperties

https://codyhouse.co/blog/post/css-custom-properties-vs-sass-variables

Прочитал статью Мириам Сьюзан про изобретательные способы использования кастомных свойств — "CSS Custom Properties In The Cascade".

Мириам на очень показательных примерах показывает, как кастомные свойства позволяют сэмулировать функцию, миксин или компонент. "Функцию", например, можно представить с помощью кастомного свойства, которое в свою очередь использует другое кастомное свойство:

.stripes {
  --stripes: linear-gradient(
    var(--stripes-angle), 
    pink 50%,
    powderblue 50%
  );
}

.vertical {
  --stripes-angle: 0deg;
  background-image: var(--stripes);
}

Мириам в статье идёт дальше и рассказывает как можно задавать дефолтные значения, как использовать пресеты и как возможно было бы параметризировать "функцию", если бы браузеры поддерживали функцию attr() из стандарта CSS3.

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

#css #customproperties

https://www.smashingmagazine.com/2019/07/css-custom-properties-cascade/