Moduły SASS

Ten artykuł wyjaśnia moduły SASS.

Wyjaśniamy, jak modularizować SASS za pomocą @use i @forward oraz jak ponownie używać zmiennych, miksinów, funkcji, ustawień motywu i publicznych API.

YouTube Video

Moduły SASS

System modułów SASS pomaga jasno określić zakres stylów i zapewnia projekt, który jest łatwy do ponownego użycia i utrzymania.

Podstawowe pojęcia dotyczące modułów

Moduły SASS rozwiązują problemy związane z zanieczyszczeniem globalnej przestrzeni nazw i niejasnymi zależnościami, które występowały w starym @import. Każdy plik jest ładowany jako moduł z własną przestrzenią nazw, a z innych plików dostępne są tylko elementy jawnie wyeksportowane.

Przykładowa struktura plików

Najpierw przykład realistycznej struktury projektu. Poniżej znajduje się przykład małego systemu projektowego.

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• Ta struktura ułatwia modularyzację, testowanie i wymianę części.
• Pliki częściowe mają podkreślenie na początku nazwy pliku.

Podstawy @use

@use ładuje moduł i udostępnia przestrzeń nazw. To zapobiega kolizjom nazw i wyjaśnia źródło modułu.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• Ten plik jest prosty i definiuje tylko zmienne. Zmiennych opublikowanych z modułu można używać bezpośrednio za pomocą @use.

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• Tutaj moduł variables jest używany z przestrzenią nazw variables.. To podejście wyraźnie określa pochodzenie każdego elementu.

Skracanie lub aliasowanie przestrzeni nazw

Użycie as pozwala skrócić przestrzeń nazw.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• To przykład importowania variables przy użyciu krótszego aliasu vars. Wybierz nazwy zależnie od tego, czy stawiasz na czytelność, czy łatwość pisania.

Definicja miksinu

Miksiny i funkcje można również definiować i używać w modułach. Zachowanie zgodności komentarzy z konwencjami projektu pomaga w czytelności.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• Ten plik definiuje miksin dla kontenerów. Przyjmuje argumenty i udostępnia wartości domyślne.

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• To przykład użycia miksinu z @include.

Definiowanie funkcji

Funkcje służą do zwracania wartości i mogą być definiowane oraz ponownie używane w modułach. Poprzez kapsułkowanie obliczeń wartości projektowych w funkcjach, style stają się bardziej stabilne i łatwiejsze w utrzymaniu.

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• Ten plik definiuje funkcję, która konwertuje wartości pikseli na rem. Określono również domyślną wartość bazową.

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• Oto przykład wywołania funkcji za pomocą @use i zastosowania wyniku do stylu.

Eksport modułów i @forward (projektowanie API)

Gdy chcesz udostępnić wiele wewnętrznych plików na zewnątrz, możesz użyć @forward, aby utworzyć „publiczne API”.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• Wiele wewnętrznych plików można pogrupować jako jeden punkt wejścia, który następnie udostępnia publiczne API. To umożliwia użytkownikom dostęp do wszystkich potrzebnych funkcji przez import jednego punktu wejścia.

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• Zawartość variables i mixins jest dostępna zbiorczo przez index. @forward sprawia, że index staje się warstwą publiczną.

Kontrolowanie API za pomocą opcji show / hide dla @forward

Jeśli chcesz udostępnić tylko konkretne zmienne, użyj opcji show lub hide.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• Dodanie !default pozwala udostępnić wartość, którą można nadpisać.

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• Używając show z @forward, możesz ograniczyć udostępnione API wyłącznie do niezbędnych elementów. Zmiennych i funkcji używanych wewnętrznie nie będzie widać z zewnątrz.

Uczynienie modułów konfigurowalnymi (za pomocą with)

Jeśli użyjesz !default w module, wartości mogą być nadpisane za pomocą with podczas importu.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• Moduł z wartościami domyślnymi określonymi przez !default może przyjmować konfiguracje przez with.

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• with w @use umożliwia nadpisanie domyślnych zmiennych modułu podczas importowania. To jest przydatne przy przełączaniu motywów.
• Pamiętaj, że with działa tylko w momencie importu i nie możesz zmienić tych wartości później.

Praktyczny przykład: komponent przycisku (kompletny przykład)

Spróbujmy zaprojektować style przycisku za pomocą modułów. Najpierw rozdziel zmienne i miksiny do własnych modułów.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• Tutaj zdefiniowane są domyślne zmienne dla przycisków. Użycie !default pozwala użytkownikom nadpisać te wartości.

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• Tutaj zdefiniowany jest podstawowy miksin dla przycisków. Są oddzielone dla łatwego ponownego użycia.

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• Style przycisków są tworzone przy użyciu odwołań do przestrzeni nazw z @use. Wariant zdefiniowany jest jako .button--large.

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• Importując moduł button, możesz natychmiast używać stylów przycisku.

Przełączanie motywów (używanie wielu plików motywu)

Przełączanie motywów można wykonać poprzez konfigurację przez with lub utworzenie oddzielnych modułów i zmianę używanego przez @use.

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• Zdefiniuj kolory marki i inne ustawienia w kilku plikach motywu i przełączaj je podczas budowania lub importu.

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• Wybierz motyw poprzez użycie with lub importując np. @use 'themes/light' podczas procesu budowania.

Prywatne i publiczne (prefiks _ i !default)

W SASS dodanie podkreślenia na początku nazwy pliku oznacza go jako partial (część). Jednak kontrolując widoczność eksportu modułu, używaj show i hide z @forward, aby kontrolować, co jest eksportowane.

Możesz użyć @forward, aby zorganizować publiczne API i ukryć implementacje wewnętrzne przed użytkownikami.

Najlepsze praktyki do zastosowania w rzeczywistych projektach

Poniżej przedstawiono kilka podstawowych koncepcji, które są przydatne podczas korzystania z SASS w praktycznych sytuacjach. Wszystkie te wskazówki pomogą ograniczyć zamieszanie podczas rozwoju i utrzymają Twój kod w porządku.

• Jeśli zmienne mogą się zmieniać jako część motywu, dodaj !default. To ułatwia użytkownikom nadpisywanie wartości.
• Moduły powinny być podzielone według odpowiedzialności i skupione na jednym celu. Łatwiej zarządzać, rozdzielając zmienne, miksiny i komponenty.
• Zarządzaj zawartością publiczną przy pomocy @forward i używaj show lub hide w razie potrzeby. Definiowanie zakresu rzeczy publicznych prowadzi do bezpieczniejszego projektu.
• Używaj przestrzeni nazw, aby było jasne, do którego modułu należy dana funkcja. To zapobiega pomyłkom z innym kodem.
• Pamiętaj, że with działa tylko podczas @use. Ponieważ nie możesz ich zmieniać później, ustaw konfiguracje podczas importowania.
• Dodaj podkreślenie na początku nazw plików, aby uczynić je częściowymi i uniemożliwić ich indywidualną kompilację. To ułatwia łączenie plików w większą strukturę.
• Dodanie przykładów użycia w module index pomaga w testowaniu i dokumentacji. Użytkownikom łatwiej zrozumieć działanie.

Pamiętając o tych wskazówkach łatwiej zarządzać dużymi projektami i utrzymać czytelność kodu w zespole.

Podsumowanie

System modułów SASS organizuje kod stylów poprzez przestrzenie nazw, publiczne API oraz uproszczoną konfigurację. Umiejętne korzystanie z @use i @forward bardzo ułatwia rozwój zespołowy, przełączanie motywów i projektowanie bibliotek.

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

YouTube Video