Zagnieżdżanie w Sass
Zagnieżdżanie, inaczej nazywane nesting, to jedna z najpotężniejszych funkcji Sass, która pozwala na zagnieżdżanie selektorów wewnątrz innych selektorów. To oznacza, że możemy strukturalnie i logicznie organizować nasze style CSS w sposób, który bardziej odpowiada strukturze HTML.
Podstawowe zagnieżdżanie
Przykładowo, zamiast pisać:
1nav {
2 width: 100%;
3}
4
5nav ul {
6 list-style: none;
7}
8
9nav ul li {
10 display: inline-block;
11}Możemy to zapisać w Sass jako:
1nav {
2 width: 100%;
3
4 ul {
5 list-style: none;
6
7 li {
8 display: inline-block;
9 }
10 }
11}Jak widać, selektory w Sass są zagnieżdżone w taki sam sposób, jak elementy HTML na stronie. Dzięki temu kod jest bardziej czytelny i łatwiejszy do utrzymania.
Ampersand (&)
W Sass ampersand (&) służy do odniesienia się do selektora nadrzędnego. Może być bardzo przydatne, gdy chcemy zdefiniować style dla hover, active, czy specyficznej klasy dla danego elementu.
Przykładowo:
1button {
2 background-color: blue;
3 color: white;
4
5 &:hover {
6 background-color: darkblue;
7 }
8
9 &.primary {
10 background-color: red;
11 }
12}Po skompilowaniu do CSS otrzymamy:
1button {
2 background-color: blue;
3 color: white;
4}
5
6button:hover {
7 background-color: darkblue;
8}
9
10button.primary {
11 background-color: red;
12}Ostrzeżenie
Mimo że zagnieżdżanie to potężne narzędzie, trzeba używać go z umiarem. Zbyt głębokie zagnieżdżanie może prowadzić do generowania skomplikowanych i specyficznych selektorów, co utrudnia utrzymanie kodu i może prowadzić do nieoczekiwanego zachowania styli. Dobrą praktyką jest unikanie zagnieżdżania głębiej niż 3 poziomy.
Pamiętaj, że Sass to narzędzie mające na celu pomoc w tworzeniu lepszego, bardziej zorganizowanego i łatwiejszego do zarządzania kodu CSS. Zawsze staraj się korzystać z jego funkcji w sposób, który najbardziej przynosi korzyści twojemu projektowi.
Zadanie: Zagnieżdżanie w Sass
Twoim zadaniem jest stworzenie zorganizowanego i responsywnego layoutu strony internetowej z użyciem zagnieżdżania w Sass. W tym zadaniu wykorzystasz podstawowe zagnieżdżanie, użycie ampersand (&) oraz zadbasz o czytelność i organizację kodu.
Cele Zadania
- Stworzenie nagłówka (header) z zagnieżdżonym menu nawigacyjnym.
- Utworzenie sekcji z kartami, które zmieniają styl po najechaniu myszką.
- Stworzenie stopki (footer) z zagnieżdżonymi elementami kontaktowymi.
- Zadbanie o responsywność i czytelność kodu Sass.
Krok 1: Struktura HTML
Najpierw utwórz plik HTML z poniższą strukturą:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Zagnieżdżanie w Sass</title>
7 <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10 <header class="main-header">
11 <h1>Moja Strona</h1>
12 <nav>
13 <ul>
14 <li><a href="#">Strona Główna</a></li>
15 <li><a href="#">O nas</a></li>
16 <li><a href="#">Kontakt</a></li>
17 </ul>
18 </nav>
19 </header>
20 <section class="cards-section">
21 <div class="card">
22 <h2>Karta 1</h2>
23 <p>Opis karty 1.</p>
24 </div>
25 <div class="card">
26 <h2>Karta 2</h2>
27 <p>Opis karty 2.</p>
28 </div>
29 <div class="card">
30 <h2>Karta 3</h2>
31 <p>Opis karty 3.</p>
32 </div>
33 </section>
34 <footer class="main-footer">
35 <p>© 2023 Moja Strona</p>
36 <div class="contact-info">
37 <p>Email: kontakt@mojastrona.pl</p>
38 <p>Telefon: +48 123 456 789</p>
39 </div>
40 </footer>
41</body>
42</html>Krok 2: Style Sass
Teraz utwórz plik Sass (styles.scss) i dodaj następujące style z zagnieżdżaniem:
1/* Podstawowe style */
2body {
3 font-family: Arial, sans-serif;
4 margin: 0;
5 padding: 0;
6 background-color: #f0f0f0;
7}
8
9.main-header {
10 background-color: #333;
11 color: #fff;
12 padding: 20px;
13 text-align: center;
14
15 nav {
16 ul {
17 list-style: none;
18 padding: 0;
19
20 li {
21 display: inline-block;
22 margin: 0 10px;
23
24 a {
25 color: #fff;
26 text-decoration: none;
27
28 &:hover {
29 text-decoration: underline;
30 }
31 }
32 }
33 }
34 }
35}
36
37.cards-section {
38 display: flex;
39 justify-content: space-around;
40 padding: 20px;
41
42 .card {
43 background-color: #fff;
44 border: 1px solid #ccc;
45 padding: 20px;
46 width: 30%;
47 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
48
49 h2 {
50 margin-top: 0;
51 }
52
53 &:hover {
54 background-color: #f9f9f9;
55 transform: scale(1.05);
56 transition: all 0.3s ease;
57 }
58 }
59}
60
61.main-footer {
62 background-color: #333;
63 color: #fff;
64 padding: 20px;
65 text-align: center;
66
67 .contact-info {
68 p {
69 margin: 5px 0;
70
71 &:first-child {
72 font-weight: bold;
73 }
74 }
75 }
76}Krok 3: Kompilacja Sass
Użyj narzędzia do kompilacji Sass (np. node-sass, Dart Sass, czy preprocesora w edytorze) do wygenerowania pliku CSS (styles.css) z pliku Sass (styles.scss).
Krok 4: Testowanie
Otwórz plik HTML w przeglądarce, aby zobaczyć efekty zagnieżdżania w Sass. Upewnij się, że wszystkie style działają zgodnie z oczekiwaniami.
Zadanie
- Rozbudowa Menu Nawigacyjnego: Dodaj podmenu do jednej z pozycji w menu nawigacyjnym (
), które pojawia się po najechaniu myszką. Stylizuj podmenu z użyciem zagnieżdżania.<nav> - Animacja Kart: Dodaj do kart (
) animację przy użyciu.card
i@keyframes
. Animacja powinna delikatnie przesuwać karty w górę i w dół.animation - Responsywność: Dodaj zagnieżdżone media queries, aby layout był responsywny. Przykładowo, ustaw karty (
) na 100% szerokości na mniejszych ekranach..card - Stylizacja Stopki: Rozbuduj stylizację stopki (
), dodając zagnieżdżone style dla linków do mediów społecznościowych, które pojawią się w stopce..main-footer
Wykorzystaj wszystkie przedstawione techniki zagnieżdżania, aby stworzyć dobrze zorganizowany, czytelny i responsywny layout strony internetowej.