Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?

Управление шкалой типов

В контексте статьи type это «шрифт», а не «тип».

Не используем, но рассматриваем в качестве основного кандидата для темизации.
Номер два всякие CSS-in-JS решения, однако решение с CSS переменными позволит избежать переписывания существующего кода, так как мы уже используем CSS-modules и SCSS.

«преимущество использования переменных CSS над переменными SASS»
Вот зачем путать тёплое с мягким? Просто sass-переменные они для AOT (Ahead-of-Time), а custom properties для JIT (Just-in-time). Их вполне нормально использовать совместно.