MC, 07:55 wtorek, 10.03.2020 r.
Ilustracja do artykułu: Jak przypisać wartość zmiennej SASS do zmiennej CSS?

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!

Imię:
Treść: