Jak przypisać wartość zmiennej SASS do zmiennej CSS?
Przyznaję, że zaskoczeniem dla mnie było, że najprostsze w formie przypisanie zmiennej SASS do zmiennej CSS zywczajnie nie działa. I rzeczywiście... trzeba to zrobić nieco inaczej - o tym ta notatka.
Czego próbowałem?
Jeśli zacznę od tego, że z pracą nad stylami mam do czynienia bardzo sporadycznie, to chyba nie zaskoczę nikogo tym, jak wstępnie próbowałem przypisać wartość zmiennej SASS, co jednak okazało się zupełnie nieskuteczne.
$my-var: #ffffff; --css-variable: $my-var; --css-variable-darker: darken($my-var, 20%);
Zamiast wartości koloru #ffffff przechowywanego w zmiennej SASS $my-var, do zmiennej CSS przypisane zostało literalnie nic nie znaczące dla CSS '$my-var'.
Jak prawidłowo przypisać zmienną?
I tutaj dochodzimy do sedna sprawy. Aby przypisać zmienną musimy użyć mechanizmu interpolacji, który w SASS przyjmuje składnię: #{}. Zatem poprawiony kod powinien wyglądać jak następuje:
$my-var: #ffffff; --css-variable: #{$my-var}; --css-variable-darker: #{darken($my-var, 20%)};
Komentarze (0) - Nikt jeszcze nie komentował - bądź pierwszy!