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

Сначала простой ответ, ниже обсуждаем варианты.

Сразу нужно отметить, что нужно ставить экранирующий слеш перед селектором \:root

@function color($color-name)
  @return var(--color-#{$color-name})

\:root
  --color-gray-600: rgb(75, 85, 99)

p, span
  color: color(gray-600)

На выходе из этого получится такой CSS код:

:root {
  --color-gray-600: rgb(75, 85, 99);
}

p, span {
  color: var(--color-gray-600); 
}

Постановка задачи

Зачем же понадобилось использовать CSS переменные, если мы можем объявлять переменные в самом sass?

У них есть несколько преимуществ - их можно менять используя JavaScript прямо на сайте, ничего не перекомпилируя. Например, когда вы хотите установить переключатель на светлую/темную тему сайта.

А еще они могут быть ограничены элементом, на котором они объявлены, что приближает нас к компонентному подходу.

Сложности использования CSS переменных в Sass

Если вы хотите сделать как в примере ниже, то ничего не выйдет, потому что переменная $gray-50 не подставится.

$gray-50: rgb(249, 250, 251)

\:root
  --color-gray-50: $gray-50

p, span
  color: var(--color-gray-50)

Но можно собрать это с помощью map и each, предварительно определив переменные:

$colors: () !default
$colors: map-merge( ( "white": $white, "gray-600": $gray-600, "gray-800": $gray-800 ), $colors )

\:root
  @each $color, $value in $colors
    --#{$color}: #{$value}

На выходе получим что-то подобное:

:root {
  --white: white;
  --gray-600: #4b5563;
  --gray-800: #1f2937; }

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

И нет причин оборачивать CSS свойство в еще одну абстракцию в виде SASS переменной. Если только вы не хотите производить какие-то математические операции с цветами, которые доступны в Sass.