Partials i moduły w Sass

Sass oferuje sposób na podział Twojego CSS na mniejsze kawałki, które możesz zaimportować do głównego pliku stylów. Te mniejsze pliki nazywamy częściami, czyli "partials" w języku angielskim. Umożliwiają one tworzenie modułów, które mogą być ponownie wykorzystane w całym projekcie.

Partials

Partial w Sass to plik z małym fragmentem kodu CSS. Zasady nazywania partiali w Sass są proste - ich nazwy powinny zaczynać się od podkreślenia _. Na przykład, _buttons.scss.

Podkreślenie mówi Sassowi, że plik jest partial, a nie głównym plikiem CSS, który powinien być skompilowany do pliku .css. Partials są używane do importu do innych plików Sass.

Importowanie

Aby zaimportować partial, użyjemy dyrektywy @use. Na przykład, jeżeli mamy partial _buttons.scss, możemy go zaimportować do naszego głównego pliku stylów:

1// W pliku main.scss
2@use 'buttons';

Pamiętaj, że przy importowaniu pliku nie musisz dodawać podkreślenia _ ani rozszerzenia .scss. Sass jest na tyle mądry, że wie, czego szukasz.

Po zaimportowaniu partiala, wszystkie style zdefiniowane wewnątrz niego są dostępne w pliku, do którego go zaimportowałeś.

Moduły

Moduły to po prostu pliki Sass, które eksportują style, zmienne, mixiny, funkcje itd. Moduł może być dowolnym plikiem Sass, nie tylko partial.

Aby zaimportować moduł, używamy również dyrektywy @use. Przykładowo, jeśli mamy moduł _variables.scss, który eksportuje kilka zmiennych, możemy go zaimportować do naszego głównego pliku stylów:

1// W pliku main.scss
2@use 'variables';

Następnie możemy użyć tych zmiennych w naszym głównym pliku stylów, odwołując się do nich przez nazwę modułu:

1body {
2  color: variables.$text-color;
3  background-color: variables.$bg-color;
4}

Podział kodu na mniejsze, zarządzalne kawałki jest kluczowym aspektem utrzymania czystego i zorganizowanego kodu CSS. Dzięki partialom i modułom Sass staje się to dużo łatwiejsze.

Zadanie: Stworzenie Projektu z Sass Partials i Modułami

Cele Zadania

Stworzenie struktury projektu Sass z użyciem partiali i modułów.
Organizacja stylów w moduły, takie jak zmienne, mixiny i style komponentów.
Importowanie i używanie modułów w głównym pliku stylów.

Krok 1: Struktura Plików

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

1project/
2|-- scss/
3|   |-- _variables.scss
4|   |-- _mixins.scss
5|   |-- _buttons.scss
6|   |-- _header.scss
7|   |-- main.scss
8|-- index.html

Krok 2: Zdefiniowanie Zmiennych i Mixinów

W pliku _variables.scss zdefiniuj kilka zmiennych:

1// _variables.scss
2$text-color: #333;
3$bg-color: #f9f9f9;
4$primary-color: #007bff;
5$padding: 20px;

W pliku _mixins.scss zdefiniuj kilka przydatnych mixinów:

1// _mixins.scss
2@mixin center-flex {
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Krok 3: Stylizacja Komponentów

W pliku _buttons.scss zdefiniuj style dla przycisków:

1// _buttons.scss
2@use 'variables';
3
4.button {
5  background-color: variables.$primary-color;
6  color: #fff;
7  padding: variables.$padding;
8  border: none;
9  border-radius: 5px;
10
11  &:hover {
12    background-color: darken(variables.$primary-color, 10%);
13  }
14}

W pliku _header.scss zdefiniuj style dla nagłówka:

1// _header.scss
2@use 'variables';
3@use 'mixins';
4
5.header {
6  background-color: variables.$primary-color;
7  color: #fff;
8  padding: variables.$padding;
9  
10  .header-content {
11    @include mixins.center-flex;
12    flex-direction: column;
13  }
14}

Krok 4: Importowanie Partiali i Modułów

W pliku main.scss zaimportuj wszystkie partiale i moduły:

1// main.scss
2@use 'variables';
3@use 'mixins';
4@use 'buttons';
5@use 'header';

Krok 5: 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).

Krok 6: 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  <header class="header">
11    <div class="header-content">
12      <h1>Witamy na naszej stronie</h1>
13      <button class="button">Kliknij mnie</button>
14    </div>
15  </header>
16</body>
17</html>

Zadanie

Dodanie Nowych Komponentów: Dodaj nowy partial _footer.scss i zdefiniuj style dla stopki. Zaimportuj go do main.scss i dodaj odpowiedni HTML do index.html.
Rozbudowa Mixina: Rozbuduj mixin center-flex, aby przyjmował opcjonalne argumenty justify-content i align-items.
Użycie Nowych Zmiennych: Dodaj nowe zmienne do _variables.scss, np. dla kolorów akcentów i marginesów, i użyj ich w innych stylach.
Refaktoryzacja Kodów: Przeorganizuj style w plikach partiali, aby były bardziej modularne i łatwiejsze do zarządzania.

Zadanie to pozwoli Ci w pełni wykorzystać moc partiali i modułów w Sass, tworząc zorganizowany i skalowalny projekt.

Ir a CodeWorlds→