Extend i dziedziczenie w Sass

Sass umożliwia użycie dziedziczenia i rozszerzenia selektorów, co pozwala na jeszcze większą optymalizację i unikanie powtarzalności kodu. Oznacza to, że możemy tworzyć klasy, które dziedziczą style od innych klas, dodając swoje unikalne style.

Dyrektywa @extend

Dyrektywa @extend pozwala na dziedziczenie wszystkich styli od innego selektora. Na przykład:

1.panel {
2  border: 1px solid gray;
3  padding: 10px;
4  color: black;
5}
6
7.panel-success {
8  @extend .panel;
9  border-color: green;
10}

Po skompilowaniu do CSS, otrzymamy:

1.panel, .panel-success {
2  border: 1px solid gray;
3  padding: 10px;
4  color: black;
5}

.panel-success { border-color: green; }

Jak widać, .panel-success dziedziczy wszystkie style z .panel, a następnie dodaje swój unikalny styl.

Selektory zastępcze (placeholder selectors)

Sass oferuje również tzw. selektory zastępcze (placeholder selectors), które definiujemy za pomocą znaku %. Selektory te nie generują kodu CSS samodzielnie - są używane wyłącznie z dyrektywą @extend.

1%button {
2  padding: 10px 15px;
3  border: none;
4  border-radius: 5px;
5  font-size: 16px;
6}
7
8.button-primary {
9  @extend %button;
10  background-color: blue;
11  color: white;
12}
13
14.button-danger {
15  @extend %button;
16  background-color: red;
17  color: white;
18}

Po skompilowaniu do CSS, otrzymamy:

1.button-primary, .button-danger {
2  padding: 10px 15px;
3  border: none;
4  border-radius: 5px;
5  font-size: 16px;
6}
7
8.button-primary {
9  background-color: blue;
10  color: white;
11}
12
13.button-danger {
14  background-color: red;
15  color: white;
16}

Rozszerzanie i dziedziczenie to potężne mechanizmy w Sass, które pozwalają na utrzymanie zwięzłego, czytelnego i łatwo zarządzalnego kodu CSS. Pamiętaj jednak, że należy korzystać z nich z umiarem i starannością, aby nie utworzyć zbyt skomplikowanych i trudnych do debugowania relacji między stylami.

Zadanie: Użycie @extend i selektorów zastępczych w projekcie Sass

Cele Zadania

1. Stworzenie podstawowych stylów przy użyciu selektorów zastępczych.
2. Zastosowanie dyrektywy @extend do dziedziczenia stylów w różnych klasach.
3. Organizacja kodu w modułach i partialach dla lepszej czytelności i zarządzania.

Krok 1: Struktura Plików

Utwórz następującą strukturę plików dla projektu:

1project/
2|-- scss/
3|   |-- _base.scss
4|   |-- _buttons.scss
5|   |-- main.scss
6|-- css/
7|   |-- main.css
8|-- index.html

Krok 2: Definiowanie Stylów Podstawowych

W pliku _base.scss zdefiniuj podstawowe style przy użyciu selektorów zastępczych:

1// _base.scss
2%base-panel {
3  border: 1px solid gray;
4  padding: 10px;
5  color: black;
6}
7
8%base-button {
9  padding: 10px 15px;
10  border: none;
11  border-radius: 5px;
12  font-size: 16px;
13}

Krok 3: Tworzenie Stylów Specyficznych

W pliku _buttons.scss zaimportuj style podstawowe i stwórz specyficzne klasy:

1// _buttons.scss
2@use 'base';
3
4.panel-success {
5  @extend %base-panel;
6  border-color: green;
7}
8
9.panel-warning {
10  @extend %base-panel;
11  border-color: orange;
12}
13
14.button-primary {
15  @extend %base-button;
16  background-color: blue;
17  color: white;
18}
19
20.button-danger {
21  @extend %base-button;
22  background-color: red;
23  color: white;
24}

Krok 4: Kompilacja Sass

W pliku main.scss zaimportuj wszystkie częściowe pliki i skompiluj do CSS:

1// main.scss
2@use 'base';
3@use 'buttons';

Krok 5: HTML

Utwórz plik index.html i dodaj do niego następującą 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>Projekt Sass</title>
7  <link rel="stylesheet" href="css/main.css">
8</head>
9<body>
10  <div class="panel panel-success">
11    Panel Success
12  </div>
13  <div class="panel panel-warning">
14    Panel Warning
15  </div>
16  <button class="button-primary">Primary Button</button>
17  <button class="button-danger">Danger Button</button>
18</body>
19</html>

Krok 6: Kompilacja Sass

Użyj narzędzia do kompilacji Sass (np. node-sass, Dart Sass, czy preprocesora w edytorze) do wygenerowania pliku CSS (main.css) z pliku Sass (main.scss).

Zadanie

1. Dodanie Nowych Stylów: Stwórz nowe style dla paneli informacyjnych i przycisków za pomocą selektorów zastępczych i dyrektywy @extend.
2. Refaktoryzacja Istniejących Stylów: Przeanalizuj istniejący kod CSS i użyj selektorów zastępczych oraz dyrektywy @extend, aby uprościć i zoptymalizować kod.
3. Testowanie Stylów: Przetestuj nowe i zmodyfikowane style na różnych elementach HTML, aby upewnić się, że dziedziczenie działa prawidłowo.

To zadanie pomoże Ci zrozumieć, jak efektywnie korzystać z dyrektywy @extend i selektorów zastępczych w Sass, aby tworzyć modularne, czytelne i łatwe do zarządzania arkusze stylów.

1<!DOCTYPE html>
2<html lang="pl">
3<head><title>Radio buttons</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Radio Buttons</h1>
6<input type="radio" name="god"> Ra <input type="radio" name="god"> Ozyrys
7</body>
8</html>