Zmienne w SASS | Wyjaśnione

Składnie niesamowite Stylesheet (SASS) Processes CSS i działa dobrze ze wszystkimi jego wersjami. Zwiększa zdolność podstawowego języka poprzez obsługę użycia zmiennych, gniazdowania, miksów, dziedzictwa itp. Jeśli mówimy o jego zmiennych, to świetny sposób, aby zapobiec pisaniu zbędnych wartości CSS. Aby dowiedzieć się więcej o zmiennych SASS, śledź artykuł do samego końca.

Zmienne w SASS

Zmienne SASS są używane do przechowywania informacji, które można później używać w dowolnym miejscu w arkuszu stylów. Rodzaj informacji, które może przechowywać zmienną SASS, obejmuje kolory, liczby, struny, listy, boolean i nulls.

Składnia

$ variableName: variableValue;

Aby zadeklarować zmienną SASS, musisz dołączyć znak dolara ($), a następnie nazwa zmiennej, dwukropek, wartości zmiennej i półkolonu.

Przykład
Zastosujmy zmienne SASS za pomocą przykładu.

Html

To jest akapit.

To jest div

To jest nasz plik HTML, w którym utworzyliśmy dwa elementy, które są akapit. Tymczasem link pliku CSS wygenerowanego w wyniku kompilacji pliku SASS został dostarczony do atrybutu HREF znacznika.

Sass

$ fontfam: Verdana, sans-serif;
$ czcionki: 35px;
$ fontcolor: Pink;
$ granica: 2px solidny czarny;
$ wyściółka: 10px;
P
Font-family: $ fontfam;
Font-size: $ fontsize;
Kolor: $ fontcolor;

.pojemnik
Wyściółka: $ wyściółka;
granica: $ granica;

To jest nasz plik SASS z .Rozszerzenie SCSS. Tutaj utworzyliśmy pięć zmiennych sass, a mianowicie $ fontfam, $ fontsize, $ fontcolor, $ granica i wyściółka $. Po ogłoszeniu używamy tych zmiennych w naszym pliku do stylizacji naszych elementów.

CSS

To jest nasz wynikowy plik CSS.

Wyjście

Elementy zostały pomyślnie stylizowane przy użyciu zmiennych SASS.

Zmienne SASS Zakres

Zmienne w SASS można zadeklarować w dowolnym miejscu w dokumencie przed ich użyciem i mogą mieć globalny zakres lub zakres lokalny.

Zmienna SASS z zakresem globalnego jest zadeklarowana na początku pliku, a później używana w całym dokumencie w razie potrzeby.

Tymczasem zmienna SASS z lokalnym zakresem jest zadeklarowana w bloku i może być używana tylko w zakresie tego konkretnego bloku.

Przykład
Poniższy przykład pokazuje globalne i lokalne zmienne sassowe.

Sass

$ czcionki: 35px;
$ wyściółka: 10px;
P
Font-family: $ fontfam;
Font-size: $ fontsize;
Kolor: $ fontcolor;

.pojemnik
$ granica: 2px solidny czarny;
Wyściółka: $ wyściółka;
granica: $ granica;
Font-size: $ fontsize;

Jest to ten sam kod co powyżej z jedyną różnicą, jaką czcionki $, a $ wyściółka są zmiennymi globalnymi i może być używane w dowolnym miejscu w pliku, tymczasem granica $ jest zmienną lokalną i może być używana tylko w ramach bloku it jest zadeklarowany w. Ten kod będzie miał to samo wyjście, jak pokazano w poprzedniej sekcji. Ponadto wynikowy wynik CSS będzie również taki sam.

Wniosek

Zmienne SASS są używane do przechowywania informacji, które można później używać w dowolnym miejscu w arkuszu stylów. Te zmienne mogą przechowywać kolory, liczby, struny, listy, boolean i nulls. Nazwa zmiennej SASS musi rozpocząć się od znaku dolara ($), a zmienne te mogą mieć globalny zakres lub zakres lokalny. Co więcej, to świetny sposób, aby zapobiec pisaniu zbędnych wartości CSS wielokrotnie. Artykuł szczegółowo omawia zmienne SASS wraz z odpowiednimi przykładami.