Zmienne w preprocesorze Sass

Zmienne stanowią nieodłączny element języków programowania. Pozwalają na wielokrotne użycie pewnych wartości bez konieczności kopiowania ich.
Preprocesor Sass również oferuje możliwość operowania na zmiennych.
Jest to rzecz, która jest powszechnie znana i wykorzystywana przez programistów, którzy chcą pisać kod warstwy wizualnej zgodnie z zasadą DRY (ang. Don’t Repeat Yourself).

Dzięki zastosowaniu zmiennych praca z preprocesorem Sass jest bardzo szybka
i przyjemna, a kod może być z łatwością rozwijany i modyfikowany.
Wyobraźmy sobie sytuację, w której chcemy zmienić motyw kolorystyczny szablonu strony. Dzięki zastosowaniu zmiennych, nie będzie to żmudne zajęcie zmiany wartości w wielu miejscach w kodzie.

Podstawowe informacje
Deklaracja zmiennej w Sass wygląda następująco:

$nazwa: wartość;

Zmienne w preprocesorze Sass mogą okazać się bardzo przydatne w momencie, kiedy chcemy przechować informacje dotyczące między innymi:
– wartości liczbowej jakiejś własności elementu (na przykład wysokość, margines),
– kolorów,
– wartości tekstowych,
– wartości logicznych.

Przykład użycia zmiennej w kodzie:

$black: #000;

.box {
border-color: $black; }

Warto pamiętać o tym, aby w nazwach zmiennych nie stosować znaków specjalnych, ponieważ poskutkuje to błędem kompilacji.
Dobrą praktyką jest, aby deklarowane zmienne posiadały znaczenie semantyczne. Dzięki temu kod będzie czytelniejszy i łatwiejszy w modyfikacji.

Zasięg zmiennych

Zasięg zmiennych jest kwestią znaną z języków programowania. W prostych słowach można powiedzieć, że zasięg zmiennej oznacza obszar, w jakim dana zmienna jest widoczna a co za tym idzie – może zostać wykorzystana.
Zmienne możemy podzielić na globalne – czyli takie, które definiujemy poza jakąkolwiek deklaracją, dzięki czemu możemy ich użyć w dowolnym miejscu w kodzie a także te o zasięgu lokalnym, które definiujemy w obrębie deklaracji CSS. Dostęp to tych zmiennych można uzyskać jedynie w obrębie bloku, w którym zostały zadeklarowane.

W przypadku, gdy chcemy, aby zmienna, której używamy w obrębie pewnej deklaracji była dostępna także poza nią, wówczas możemy zastosować flagę !global.
Należy pamiętać, że flaga !global nadpisuje wartości zmiennych globalnych.

Przykład użycia flagi !global:

$border-color: #fff;

.box {
border-color: $border-color; }
.box--local {
$border-color: #d3d3d3; border-color: $border-color; }
.box--global {
$border-color: #000 !global; border-color: $border-color; }

Nasz kod wynikowy będzie wyglądał następująco:

.box {
border-color: #fff; }
.box--local {
border-color: #d3d3d3; }
.box--global {
border-color: #000; }

Definiowanie wartości domyślnej

Preprocesor Sass umożliwia określenie wartości domyślnej dla zadeklarowanej zmiennej. Flaga !default może być bardzo przydatna w momencie, gdy wartość zmiennej nie została określona, lub wartość to null. Dzięki zastosowaniu tej flagi zmienna zwróci przypisaną do niej wartość domyślną.

Przykład użycia flagi !default:

$border-color: #000 !default;

Przydatne funkcje

Preprocesor Sass oferuje kilka funkcji, które ułatwiają pracę ze zmiennymi, szczególnie przy bardziej rozbudowanych projektach.

variable-exists(nazwa-zmiennej);

Funkcja ta pozwala na sprawdzenie, czy istnieje zmienna o podanej nazwie.

global-variable-exists(nazwa-zmiennej);

Dzięki tej funkcji możemy sprawdzić, czy istnieje zmienna globalna o podanej nazwie.

Do dzieła!

Praca z użyciem zmiennych w preprocesorze Sass znacząco ułatwia pracę z arkuszami stylów – kod może być z łatwością modyfikowany i rozwijany. Jest to jedna z podstawowych zalet stosowania Sass w projekcie.

Warto wspomnieć o tym, że zmienne mogą być również używane w kodzie CSS.
Podstawowe informacje na temat różnic między stosowaniem zmiennych w CSS a w preprocesorze Sass można znaleźć tutaj.

Kinga Nowak
Front - End Developer

SALESmanago o platforma Customer Engagement, zaprojektowana dla efektywnych i głodnych sukcesu zespołów marketingowych w eCommerce. Dla marketerów, którzy pragną być zaufanymi partnerami dla swoich CEO. Z naszego rozwiązania korzysta ponad 2000 biznesów online średniej wielkości w 50 krajach oraz liczne globalne marki takie jak Starbucks, Vodafone, Lacoste, New Balance czy Victoria's Secret.

SALESmanago zapewnia maksymalizację wzrostu przychodów oraz poprawy wskaźników KPI dla eCommerce wykorzystując trzy zasady: (1) Customer Intimacy, aby stworzyć autentyczne relacje z klientami w oparciu o dane Zero- i First-Party, (2) Precision Execution, aby zapewnić doskonałe omnichannelowe doświadczenie klienta dzięki hiper-personalizacji oraz (3) Growth Intelligence, która łączy wskazówki opracowane przez specjalistów oraz AI, umożliwiając pragmatyczne i szybkie podejmowanie decyzji w celu maksymalizacji efektu.

Czytaj więcej na: www.salesmanago.pl

Pracuj jak dziesięciu najlepszych marketerów naraz! Różnica między Workflow, który działa, a takim, który nie bardzo
Pracuj jak dziesięciu najlepszych marketerów naraz! Różnica między Workflow, który działa, a takim, który nie bardzo

    Lean Marketing wymaga skuteczności, ale taki tytuł może wydawać się przesadą. To nie jest jednak wygórowane oczekiwanie, a propozycja rozwiązania. Jest to wykonalne – jeśli masz odpowiedni Workflow. W tym artykule wyjaśnimy, czym jest Workflow, jak działa, kto odpowiada za jego efektywność, a ostatecznie – jak skorzystać z doświadczenia twórców szablonów. Utrata produktywności […]

[Nowa funkcjonalność] Szablony Workflow opracowane przez ekspertów eCommerce, dopasowane do twoich celów marketingowych
[Nowa funkcjonalność] Szablony Workflow opracowane przez ekspertów eCommerce, dopasowane do twoich celów marketingowych

    Zebraliśmy naszych czołowych ekspertów eCommerce, którzy na co dzień pracują z największymi światowymi markami, aby całkowicie przeprojektować szablony Workflow w naszej Bibliotece. Ludzie ci włożyli tysiące godzin swojego doświadczenia i unikatową wiedzę w stworzenie nowych, ulepszonych szablonów. Wszystko to, aby zaoszczędzić Twój czas. Ponadto, do Biblioteki dodaliśmy Generator Workflow — pierwszą taką funkcję […]

[Nowa Funkcjonalność] Zmaksymalizuj swój wpływ i kontrolę dzięki nowemu eCommerce Dashboard
[Nowa Funkcjonalność] Zmaksymalizuj swój wpływ i kontrolę dzięki nowemu eCommerce Dashboard

    Nasza najnowsza funkcjonalność, eCommerce Dashboard, agreguje dane z platform eCommerce oraz oprogramowania marketingowego i prezentuje je w jednym miejscu, w czasie rzeczywistym, 24 godziny na dobę, 7 dni w tygodniu. Jako, że umożliwia szybki przegląd wydajności sklepu internetowego, a także szczegółowe śledzenie różnych aspektów biznesu, stanowi niezwykle skuteczne, wielokanałowe narzędzie Growth Intelligence.   […]

SALESmanago przeprowadzi się do dedykowanego biurowca w Ocean Office Park na krakowskim Zabłociu
SALESmanago przeprowadzi się do dedykowanego biurowca w Ocean Office Park na krakowskim Zabłociu

    SALESmanago, największa w Polsce i najszybciej rosnąca firma tworząca rozwiązania technologiczne dla eCommerce, we wrześniu przyszłego roku przenosi swoją siedzibę do nowo powstającego Ocean Office Park na krakowskim zabłociu. Grupa Cavatina rozpoczęła już prace nad biurowcem, który zapewni dedykowaną, nowoczesną przestrzeń dla blisko 700 obecnych i przyszłych pracowników SALESmanago.    Charakterystyczny, okrągły Ocean […]

6 prognoz na Black Friday dla eCommerce. Czego oczekuje od Ciebie Internet i co z tym zrobić?
6 prognoz na Black Friday dla eCommerce. Czego oczekuje od Ciebie Internet i co z tym zrobić?

    Black Friday będzie rokiem 2022 w pigułce. Internet pęka w szwach od prognoz i strategii. W tym artykule przedstawiamy sześć najbardziej rozpowszechnionych, istotnych lub po prostu interesujących. Przedstawiamy również nasze podejście do nich. Ale przede wszystkim podpowiadamy, co z nimi zrobić. Na honorowe wyróżnienie zasługują prognozy: zabawki rozejdą się jak świeże bułeczki, ubrania […]

Jak zwiększyć Customer Lifetime Value dzięki platformie Customer Engagement
Jak zwiększyć Customer Lifetime Value dzięki platformie Customer Engagement

    Zwiększanie Customer Lifetime Value to jeden z najskuteczniejszych sposobów na podniesieniea przychodów. W końcu klient, którego już mamy, kosztuje nas znacznie mniej niż konwersja nowego użytkownika. W tym artykule pokażemy cztery scenariusze, w których możesz inteligentnie wykorzystać platformę Customer Engagement, aby zapewnić klientom większą wartość i zarobić więcej pieniędzy w tym procesie.   […]

Idealna strona docelowa – audyt Landing Page’a krok po kroku
Idealna strona docelowa – audyt Landing Page’a krok po kroku

    Wyobraź sobie, że masz niesamowicie efektowną stronę docelową, dzięki której dynamicznie przybywa Ci nowych leadów. Statystyki pną się w górę, a sprzedaż rośnie w oszałamiającym tempie. Jak stworzyć dobry landing page, który przyciągnie uwagę? Landing page, czyli strona docelowa, to miejsce, gdzie po kliknięciu w reklamę lub link w mailu trafia odbiorca. Od dobrze stworzonej […]

SALESmanago wzmacnia zespół C-Level Exec, szykując się na czterokrotny wzrost na terenie Europy, i doskonaląc swoje wsparcie marketerów eCommerce … z głową.
SALESmanago wzmacnia zespół C-Level Exec, szykując się na czterokrotny wzrost na terenie Europy, i doskonaląc swoje wsparcie marketerów eCommerce … z głową.

    26 września 2022, Kraków: Po dziewięciocyfrowej inwestycji ze strony Silver Tree i Perwyn, SALESmanago wzmacnia swój zespół wykonawczy C-Level. Celem jest zwiększyć przychody z 20 do 100 milionów Euro w ciągu najbliższych czterech lat i objąć pozycję europejskiego lidera customer engagement.   Nowi członkowie C-Level to doświadczeni liderzy z organizacji B2B, eCommerce i […]

Badanie firmy Forrester Consulting: 90% firm marketingowych rozpocznie pozyskiwanie Danych Zero-Party w ciągu roku
Badanie firmy Forrester Consulting: 90% firm marketingowych rozpocznie pozyskiwanie Danych Zero-Party w ciągu roku

    Prawie wszyscy przedsiębiorcy planują rozpocząć pozyskiwanie Danych Zero-Party w celu rozwiązania problemu deprecjacji informacji. Jednocześnie, jak pokazują badania Forrestera, mniej niż połowa z nich wie, jak z powodzeniem korzystać z takich zbiorów danych!   W lutym 2022 r. Forrester Consulting przeprowadził ankietę wśród 200 osób decyzyjnych różnych szczebli (manager+), skoncentrowanych na pozyskiwaniu klientów. […]

Czy Customer Engagement Platform to tylko chwytliwy buzzword na CDP?
Czy Customer Engagement Platform to tylko chwytliwy buzzword na CDP?

    Customer Engagement Platform to znacznie więcej niż platforma Customer Data, którą już znasz, być może nawet używasz. Jej funkcje znacznie wykraczają poza zbieranie i ujednolicanie danych, a umacniający wpływ na zespoły marketingowe jest ogromny. W tym artykule szczegółowo wyjaśnimy różnicę między tymi systemami. Aby stawić czoła wyzwaniom obecnej recesji, marketerzy muszą w dużym […]