Есть ли способ использовать SASS lighten () и darken () с переменными CSS?

Есть ли уловка или способ использовать Sass lighten () и darken () с переменными CSS? (Мне нужно использовать переменные css)

//.scss

    :root{
        --my-color: #ff0000;
    }
    
    // method 1 :
    $my-color-darken: darken(var(--my-color), 15%); // not working
    
    // method 2 :
    $my-color: var(--my-color);
    $my-color-lighten: lighten($my-color, 15%); // not working

css sass css-variables
person nAviD    schedule 29.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

К сожалению, это невозможно. Причина в том, что переменные css работают во время выполнения, а sass строится во время компиляции. В этом случае я посоветую использовать переменные sass. Вы уже используете его, поэтому не имеет значения, используете ли вы еще одну его функцию. Кроме того, отказ от использования переменных css улучшит совместимость браузера.

в случае, если вы все еще хотите использовать переменные css для большей части приложения. вы можете сделать что-то вроде этого:

$my-color: #ff0000;

:root{
    --my-color: $my-color;
}

$my-color-darken: darken($my-color, 15%); // not working

person Nikola.grancharov    schedule 29.10.2020