Zagnieżdżanie w SASS

Ten artykuł wyjaśnia zagnieżdżanie w SASS.

Omówimy zagnieżdżanie w SASS krok po kroku, wraz z przykładowym kodem aby pogłębić Twoje zrozumienie.

YouTube Video

Zagnieżdżanie w SASS

SASS to rozszerzony język arkuszy stylów dla CSS, oferujący wiele funkcji dla efektywnego stylowania. Wśród nich, zagnieżdżanie jest szczególnie przydatną funkcją, pozwalającą wizualnie przedstawić hierarchiczną strukturę CSS.

Podstawy zagnieżdżania

W SASS możesz organizować swój kod wizualnie, zapisując selektory CSS w strukturze hierarchicznej. Na przykład, zobaczmy jak można przepisać poniższy kod CSS używając zagnieżdżania.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

Używając SASS, możesz zapisać ten kod zwięźle przy użyciu zagnieżdżania jak poniżej.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}

• Ten kod wykorzystuje zagnieżdżanie w SASS, aby zwięźle i hierarchicznie opisać style menu nawigacyjnego. Dzięki zagnieżdżaniu relacje rodzic-dziecko stają się bardziej przejrzyste wizualnie, a czytelność wzrasta.

Odwoływanie się do selektorów nadrzędnych („&”)

Gdy musisz odnieść się do selektora nadrzędnego w zagnieżdżonych stylach, użyj &. Pozwala to tworzyć selektory ze specyficznymi stanami lub modyfikatorami.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}

• Ten kod używa & w SCSS aby zdefiniować stany :hover oraz :active dla selektora nadrzędnego .button.

Wygenerowany CSS

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Zagnieżdżanie zapytań medialnych (Media Queries)

W SASS możesz również zagnieżdżać zapytania medialne. Dzięki temu możesz wdrożyć responsywny design, zachowując powiązanie stylów.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}

• Ten kod zagnieżdża zapytanie medialne w klasie .container, umożliwiając responsywny design, który zmienia szerokość w zależności od rozmiaru ekranu.

Wygenerowany CSS

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Wskazówki dotyczące zagnieżdżania

Nadmierne używanie zagnieżdżania może sprawić, że kod stanie się zbyt złożony i mniej czytelny. Powinieneś unikać głębokiego zagnieżdżania, takiego jak w poniższym przykładzie.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Ten rodzaj kodu jest zbyt głęboko zagnieżdżony, więc można go zrefaktoryzować w następujący sposób.

1.header .nav ul li a {
2    color: red;
3}

Praktyczny przykład: Pasek nawigacyjny

Poniżej znajduje się przykład stylizacji paska nawigacyjnego z wykorzystaniem zagnieżdżania w SASS.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}

• Ten kod organizuje i definiuje style dla list i linków w pasku nawigacyjnym, wraz z efektami po najechaniu, używając zagnieżdżania w SASS.

Wygenerowany CSS

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Podsumowanie

Funkcja zagnieżdżania w SASS jest potężnym narzędziem do zwięzłego opisywania hierarchicznej struktury CSS oraz poprawy czytelności. Jednak ważne jest, aby unikać nadmiernego zagnieżdżania i odpowiednio organizować swój kod.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video