Jak zagnieżdżać zasady i nieruchomości w sass?

SASS Acronim do składniowego niesamowitego arkusza stylów jest przedprocesorem i rozszerzeniem CSS, który działa dobrze ze wszystkimi wersjami CSS. Jest dobrze znany z czystej i dobrze ustrukturyzowanej składni, która w rezultacie zwiększa możliwość podstawowego języka. SASS ułatwia użytkownikom poprzez obsługę wykorzystania zmiennych, gniazdowania, miksów, dziedzictwa itp. Podmiot omawiany w tym artykule jest gniazdowanie w SASS. Tutaj pokażemy, w jaki sposób możesz gniazdować zasady i nieruchomości w SASS.

Jak gniazdować zasady w sass

Gniazdowanie jest uważane za procedurę łączenia różnych zasad. SASS pozwala użytkownikom gniazdować reguły, uniemożliwiając pisanie zewnętrznych selektorów w kółko, czyniąc w ten sposób kod jasny i czytelny niż podstawowy CSS.

Przykład
Pokazany przykład pokazuje, jak gniazdowanie w SASS jest wykonywane.

Html

• Dom
>

• Usługi


• O nas


• Skontaktuj się z nami

W powyższym kodzie tworzymy pasek boczny, tworząc pojemnik DIV i gniazdując w nim nieuporządkowaną listę. Ponadto podaliśmy również link pliku CSS generowany po skompilowaniu naszego pliku SASS do atrybutu HREF tagu.

Sass

div
float: lewy;
Szerokość: 25%;
kolor tła: Rosybrown;
Wyściółka: 25px 15px;
ul
Typ w stylu listy: Brak;
Margines: 0;
Wyściółka: 0;

li
Wyściółka: 8px;
BARGO-Bottom: 15px;
kolor tła: śliwka;
kolor biały;

Teraz zauważysz, że w pliku SASS najpierw stylizujemy nasz kontener DIV, a następnie zagnieżdżanie naszych selektorów UL i Li wewnątrz selektora Div. Jednak ten sam kod powyżej w standardowym CSS wyglądałby tak samo.

CSS

div
float: lewy;
Szerokość: 25%;
kolor tła: Rosybrown;
Wyściółka: 25px 15px;

div ul
Typ w stylu listy: Brak;
Margines: 0;
Wyściółka: 0;

div li
Wyściółka: 8px;
BARGO-Bottom: 15px;
kolor tła: śliwka;
kolor biały;

W powyższym kodzie zobaczysz, że musimy użyć selektora div z każdym innym selektorem, aby stylizować nasze różne elementy. W CSS nie możesz gniazdować selektorów/reguł w sobie, a raczej musisz je zdefiniować jeden po drugim.

Jest to zaleta, którą SASS ma ponad CSS, że uniemożliwia użytkownikom powtarzanie zbędnych selektorów, dzięki czemu kod jest jasny i czytelny. Wyjście powyższego przykładu pokazano poniżej.

Wyjście

Pasek boczny został wygenerowany i stylizowany za pomocą gniazdowania w SASS.

Jak gniazdować właściwości w sass

Kolejną zaletą SASS jest to, że pozwala ono również na zagnieżdżanie właściwości. Musiałeś zauważyć, że prefiks różnych właściwości CSS jest taki sam, jak, wielkości czcionki, rata czcionki, masy czcionki itp. Czcionka prefiksów jest taka sama w tych właściwościach.

Teraz, aby uniknąć używania tego prefiksu wielokrotnie w swoim arkuszu stylów, możesz zagnieżdżać te właściwości w SASS. Musisz się zastanawiać, jak to zrobić. Zapoznaj się z przykładem poniżej.

Przykład
Ten przykład pokazuje, jak gniazdować właściwości w SASS.

Html

To jest akapit.

W powyższym kodzie po prostu utworzyliśmy akapit.

Sass

ciało
tło:

różowy kolor;
Załącznik: Naprawiono;


P
czcionka:

Rodzina: Verdana;
Rozmiar: 20px;
Waga: odważna;

Teraz zauważysz w powyższym kodzie, że podczas stylizacji naszych elementów za pomocą różnych właściwości CSS zapisaliśmy przedrostek raz, a następnie zagnieżdżę właściwości związane z tym prefiksem w selektorze. W ten sposób unikaliśmy pisania tego samego prefiksu w kółko.

CSS

To jest przytłoczone wyjście CSS.

Wyjście

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

Wniosek

W celu gniazdowania zasad w SASS musisz tylko pisać zewnętrzny selektor raz i gniazdować resztę selektorów w nim. Tymczasem właściwości gniazdowania w SASS pozwala na napisanie przedrostka właściwości i gniazdować powiązane właściwości w nim. Zasady i właściwości w SASS uniemożliwia wielokrotne pisanie nadmiarowych wartości CSS, dzięki czemu kod jest jasny i bardziej czytelny. W tym artykule prowadzi Cię o tym, jak gniazdować zasady i nieruchomości w SASS.