Mga SASS Module

Ipinaliwanag ng artikulong ito ang mga SASS module.

Ipinaliwanag namin kung paano gawing modular ang SASS gamit ang @use at @forward, at kung paano muling gamitin ang mga variable, mixin, function, setting ng tema, at pampublikong API.

YouTube Video

Mga SASS Module

Tinutulungan ng sistema ng module ng SASS na malinaw na limitahan ang sakop ng mga estilo at nagbibigay ng disenyo na madaling gamitin muli at mapanatili.

Pangunahing Konsepto ng mga Module

Nilulutas ng mga SASS module ang mga isyu ng polusyon ng global namespace at hindi malinaw na dependencies na naroon sa lumang @import. Ang bawat file ay kino-load bilang isang module na may sariling namespace, at tanging ang mga item na ini-export lamang ang maaring ma-access mula sa ibang file.

Halimbawa ng Istraktura ng mga File

Una, narito ang halimbawa ng makatotohanang istraktura ng proyekto. Nasa ibaba ang halimbawa ng maliit na design system.

 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

• Pinapadali ng estrukturang ito ang modularization, pati na ang pagsubok at pagpapalit ng mga bahagi.
• Ang mga partial file ay may underscore sa simula ng filename.

Pangunahing Kaalaman sa @use

Naglo-load ang @use ng isang module at nagbibigay ng namespace. Ito ay pumipigil sa name collisions at nagpapalinaw kung saang module nagmula.

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

• Ang file na ito ay payak na nagde-define lang ng mga variable. Ang mga variable mula sa module ay maaaring direktang i-reference gamit ang @use.

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

• Dito, ang module na variables ay tinutukoy gamit ang namespace na variables.. Ginagawang malinaw ng pamamaraang ito kung saan nagmula ang bawat item.

Pagpapaliksi o Pagbibigay ng Alias sa mga Namespace

Ginagamit ang as upang paikliin ang namespace.

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

• Ito ay halimbawa ng pag-import ng variables gamit ang pinaikling alias na vars. Pumili ng pangalan depende kung mas inuuna mo ang readability o ang kadalian sa pagtype.

Paglalarawan ng Mixin

Maari ring magdefine at gumamit ng mixin at function sa loob ng mga module. Ang pagpapanatili ng mga komento ayon sa convention ng proyekto ay tumutulong sa pagiging malinaw.

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}

• Nagdedeklara ang file na ito ng mixin para sa mga container. Ito ay tumatanggap ng mga argument at nagbibigay ng default na halaga.

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

• Ito ay halimbawa ng paggamit ng mixin gamit ang @include.

Pagdetalye ng mga Function

Ginagamit ang mga function upang magbalik ng mga halaga, at maaaring ideklara at gamitin muli sa loob ng mga module. Sa pamamagitan ng paglalagay ng mga kalkulasyon para sa design values sa loob ng mga function, ang mga estilo ay nagiging mas matatag at mas madaling pangalagaan.

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}

• Ang file na ito ay nagdedeklara ng isang function na nagko-convert ng mga halaga ng pixel patungo sa rem. Isinaad din ang default na base value.

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

• Narito ang isang halimbawa ng pagtawag ng function gamit ang @use at paglalapat ng resulta sa isang style.

Pag-export ng Module at @forward (Disenyo ng API)

Kung nais mong ilabas ang maraming internal na file, maaari kang gumamit ng @forward para gumawa ng 'public API'.

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

• Maaaring pagsamahin ang maraming internal file bilang isang entry point, na siyang nagbibigay ng public API. Nagpapahintulot ito sa mga gumamit na ma-access ang lahat ng feature sa pamamagitan ng pag-import lamang ng isang entry point.

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

• Ang nilalaman ng variables at mixins ay makukuha nang sama-sama sa index. Ginagawa ng @forward na pampublikong layer ang index.

Pagkontrol ng API gamit ang show / hide options ng @forward

Kung nais mo lamang ilabas ang piling variable, gamitin ang opsyong show o hide.

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

• Ang pagdaragdag ng !default ay nagbibigay daan na maging editable ang halaga.

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

• Sa paggamit ng show sa @forward, maaari mong limitahan ang API na ilalabas lamang sa kinakailangang mga element. Ang mga variable at function na ginagamit sa loob ay hindi makikita mula sa labas.

Ginagawang Configurable ang mga Module (gamit ang with)

Kung gumamit ka ng !default sa module, maaring ma-override ang halaga gamit ang with habang ini-import.

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}

• Ang module na may !default na halaga ay tumatanggap ng configuration gamit ang 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}

• Ang with sa @use ay nagpapahintulot na mapalitan ang default na variable ng module habang ini-import. Kapaki-pakinabang ito para sa pagpapalit ng tema.
• Tandaan na ang with ay gumagana lamang kapag ini-import, at hindi mo maaaring baguhin ang halaga nito pagkaraan.

Praktikal na Halimbawa: Button Component (Kumpletong Halimbawa)

Subukan nating magdisenyo ng button style gamit ang mga module. Una, ihiwalay ang variable at mixin sa kani-kanilang module.

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;

• Ang default na variable ng mga button ay nakadefine dito. Ginagamitan ng !default upang ma-override ng consumer ang halaga.

 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}

• Ang base mixin para sa button ay nakadefine dito. Hinihiwalay ang mga ito para sa madaling paggamit muli.

 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}

• Ang mga style ng button ay nililikha gamit ang namespace na reference ng @use. Ang isang variant ay nadefine bilang .button--large.

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

• Sa pag-import ng button module, maaari mo agad magamit ang button styles.

Pagpapalit ng Tema (Gamit ang Maramihang Tema na File)

Maaaring palitan ang tema sa pamamagitan ng configuration gamit ang with o kaya’y paggawa ng hiwalay na module at baguhin kung alin ang gagamitin sa @use.

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

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

• Maglagay ng mga kulay ng brand at iba pang settings sa maraming file ng tema at palit-palitin sila habang nagbi-build o nag-iimport.

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

• Pumili ng tema gamit ang with o sa pag-import, halimbawa, @use 'themes/light' habang nagbuo ng build.

Pribado at Pampubliko (Prefix na _ at !default)

Sa SASS, ang paglalagay ng underscore sa simula ng pangalan ng file ay nangangahulugang ito ay isang partial. Gayunman, kung kino-kontrol ang visibility ng export ng module, gamitin ang show at hide kasama ng @forward para kontrolin ang inilalabas.

Pwede mong gamitin ang @forward para ayusin ang public API at itago mula sa labas ang internal na implementasyon.

Pinakamabisang Paraan ng Paggamit sa Aktwal na Mundo

Narito ang ilang pangunahing konsepto na kapaki-pakinabang kung gagamitin ang SASS sa aktwal na sitwasyon. Lahat ng gabay na ito ay makakatulong sa pagpigil ng kalituhan habang nagde-develop at mapanatiling organisado ang iyong code.

• Kung maaaring magbago ang variable bilang bahagi ng tema, magdagdag ng !default. Pinapadali nito sa mga user na baguhin ang mga value.
• Dapat ihiwalay ang module ayon sa responsibilidad at nakatuon lamang sa isang layunin. Nagiging mas madali ang pamamahala sa pamamagitan ng paghihiwalay ng mga variable, mixin, at component.
• Pamahalaan ang pampublikong nilalaman gamit ang @forward at gumamit ng show o hide ayon sa pangangailangan. Ang pagtatakda ng sakop ng public na nilalaman ay nagdadala ng mas ligtas na disenyo.
• Gumamit ng namespace para malinaw kung aling module nabibilang ang bawat function. Nakakaiwas ito sa kalituhan sa ibang code.
• Tandaan na gumagana lamang ang with kapag ginagamit ang @use. Dahil hindi mo na ito mababago pagkatapos, itakda ang configuration habang ini-import.
• Gumamit ng underscore sa simula ng filename para maging partial ang mga ito at hindi maka-compile nang paisa-isa. Pinapadali nitong pagsamahin ang mga file para gumawa ng mas malaki pang estraktura.
• Ang paglalagay ng halimbawa ng paggamit sa index module ay nakakatulong sa testing at dokumentasyon. Mas pinapadali nito para sa mga gumagamit na maintindihan ang asal.

Ang pagsunod sa mga aspetong ito ay makakatulong sa pag-manage ng malalaking proyekto at pagpapanatili ng madaling basahing code bilang isang team.

Buod

Inoorganisa ng sistema ng SASS module ang style code gamit ang mga namespace, pampublikong API, at pinasimpleng configuration. Ang maayos na paggamit ng @use at @forward ay nagpapadali ng team development, pagpapalit ng tema, at disenyo ng library.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video