Как получить значение css custom properties в sass

Question

Хочу отказаться от использования scss переменных в пользу css custom properties. Но как оказалось css custom properties нельзя использовать в media queries. Для создания миксинов с брейкпоинтами приходится использовать scss переменные.

Получается дублирование значений:

$breakpoint-mobile: 375;
$breakpoint-tablet: 760;
$breakpoint-desktop: 1200;
$breakpoint-salt: 0.2;
$base-unit: 1px;

:root {
    --breakpoint-mobile: #{$breakpoint-mobile};
    --breakpoint-tablet: #{$breakpoint-tablet};
    --breakpoint-desktop: #{$breakpoint-desktop};
    --base-unit: #{$base-unit};
}

Я могу как то получить значение custom properties в scss?

:root {
    --breakpoint-mobile: 375;
    --breakpoint-salt: 0.2;
    --base-unit: 1px;
}

@mixin breakpoint_upper-mobile() {
    $width: (var(--breakpoint-mobile) - var(--breakpoint-salt)) * var(--base-unit);
    // $width: (375 - 0.2) * 1px; = 374.8px
    @media (min-width: $width) {
        @content;
    }
}

Есть какой-то способ получить значение в scss
`--breakpoint-mobile`, `--breakpoint-salt`, `--base-unit`
для вычислений?

Answer 1

Напрямую использовать CSS Custom Properties в SCSS для вычислений или в медиа-запросах невозможно. Это всё потому, что SCSS компилируется в CSS на этапе разработки, до того, как браузер начнет обрабатывать CSS. А CSS переменные обрабатываются браузером во время исполнения, и их значения могут меняться динамически, в отличие от переменных Sass, значения которых фиксированы после компиляции.

БЛОГ НА HUSL

Как получить значение css custom properties в sass

Ответы (1 шт):