โมดูล SASS

บทความนี้อธิบายเกี่ยวกับโมดูล SASS

เราอธิบายวิธีการแบ่งส่วน SASS โดยใช้ @use และ @forward และวิธีการนำตัวแปร, มิกซ์อิน, ฟังก์ชัน, การตั้งค่าธีม และ Public API กลับมาใช้ใหม่

YouTube Video

โมดูล SASS

ระบบโมดูลของ SASS ช่วยกำหนดขอบเขตของสไตล์อย่างชัดเจน และช่วยให้การออกแบบง่ายต่อการนำกลับมาใช้ใหม่และบำรุงรักษา

แนวคิดพื้นฐานของโมดูล

โมดูล SASS แก้ปัญหาเรื่องการปนเปื้อนของ namespace ทั่วโลกและการพึ่งพาที่ไม่ชัดเจนที่เกิดขึ้นกับ @import แบบเดิม แต่ละไฟล์จะถูกโหลดขึ้นมาในฐานะโมดูลที่มี namespace ของตัวเอง และจะสามารถเข้าถึงได้เฉพาะสิ่งที่ประกาศ export ไว้อย่างชัดเจนเท่านั้นจากไฟล์อื่น

ตัวอย่างโครงสร้างไฟล์

ก่อนอื่น ต่อไปนี้คือตัวอย่างโครงสร้างโปรเจกต์ที่ใช้งานจริง ด้านล่างนี้คือตัวอย่างของดีไซน์ซิสเต็มขนาดเล็ก

 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

• โครงสร้างนี้ช่วยให้การแบ่งโมดูล การทดสอบ และการเปลี่ยนบางส่วนทำได้ง่าย
• ไฟล์ partial จะมีเครื่องหมายขีดล่าง (_) นำหน้าชื่อไฟล์

พื้นฐานของ @use

@use ใช้สำหรับโหลดโมดูลพร้อมกำหนด namespace ให้ สิ่งนี้ช่วยป้องกันชื่อซ้ำและทำให้รู้ได้ชัดเจนว่าแต่ละรายการมาจากโมดูลใด

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

• ไฟล์นี้เป็นไฟล์เรียบง่ายที่ใช้กำหนดตัวแปรเท่านั้น ตัวแปรที่เผยแพร่จากโมดูลสามารถอ้างอิงได้โดยตรงผ่าน @use

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

• ที่นี่ โมดูล variables ถูกอ้างอิงด้วย namespace variables. วิธีนี้ทำให้ทราบต้นทางของแต่ละรายการอย่างชัดเจน

การย่อหรือสร้างชื่อเรียกอื่นให้กับ namespace

การใช้ as จะช่วยให้สามารถย่อ namespace ได้

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

• นี่คือตัวอย่างการ import โมดูล variables ด้วยชื่อสั้นๆ ว่า vars เลือกชื่อตามความสำคัญระหว่างการอ่านง่ายหรือพิมพ์สะดวก

การกำหนด Mixin

สามารถกำหนดมิกซ์อินและฟังก์ชันในแต่ละโมดูลและนำไปใช้งานได้ การเขียนคอมเมนต์ให้ตรงกับมาตรฐานโปรเจกต์ช่วยให้เข้าใจง่ายขึ้น

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}

• ไฟล์นี้ใช้สำหรับกำหนดมิกซ์อินของคอนเทนเนอร์ โดยรองรับการรับอาร์กิวเมนต์และสามารถกำหนดค่าเริ่มต้นได้

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

• ตัวอย่างนี้เป็นการใช้มิกซ์อินร่วมกับ @include

การกำหนดฟังก์ชัน

ฟังก์ชันใช้สำหรับส่งค่ากลับ และสามารถกำหนดและนำกลับมาใช้ใหม่ภายในโมดูลได้ การนำการคำนวณค่าดีไซน์มาใส่ไว้ในฟังก์ชัน ช่วยให้สไตล์มีเสถียรภาพและดูแลรักษาง่ายขึ้น

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}

• ไฟล์นี้กำหนดฟังก์ชันที่แปลงค่าพิกเซลเป็น rem ระบุค่าพื้นฐานเริ่มต้นไว้ด้วย

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

• ตัวอย่างการเรียกใช้ฟังก์ชันผ่าน @use และนำผลลัพธ์มาใช้กับสไตล์

การส่งออกโมดูลและ @forward (การออกแบบ API)

เมื่อคุณต้องการเปิดเผยไฟล์ภายในหลายไฟล์สู่ภายนอก คุณสามารถใช้ @forward เพื่อสร้าง 'public API'

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

• ไฟล์ภายในหลายไฟล์สามารถรวมกันเป็นจุดเริ่มต้นเดียวและทำหน้าที่เป็น public API สิ่งนี้ช่วยให้ผู้ใช้เข้าถึงฟีเจอร์ทั้งหมดได้โดย import เพียงจุดเดียว

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

• เนื้อหาของ variables และ mixins สามารถเข้าถึงรวมกันได้ผ่าน index @forward ทำให้ index กลายเป็น public layer

การควบคุม API ด้วยตัวเลือก show / hide ของ @forward

หากต้องการเปิดเผยเฉพาะตัวแปรบางตัว สามารถใช้ตัวเลือก show หรือ hide

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

• การเพิ่ม !default จะทำให้ค่าเหล่านั้นสามารถถูกเขียนทับได้

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

• การใช้ show ร่วมกับ @forward จะช่วยให้เปิดเผยเฉพาะ API ที่จำเป็น ตัวแปรและฟังก์ชันที่ใช้ภายในจะไม่ถูกมองเห็นจากภายนอก

การทำให้โมดูลสามารถตั้งค่าได้ (ด้วย with)

หากใช้ !default ในโมดูล ค่าจะถูกเขียนทับได้โดยใช้ with ตอน 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}

• โมดูลที่กำหนดค่าเริ่มต้นด้วย !default สามารถรับการตั้งค่าผ่าน 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 ใน @use ช่วยให้เขียนทับค่าตัวแปรเริ่มต้นของโมดูลในขณะ import สิ่งนี้มีประโยชน์สำหรับการสลับธีม
• โปรดทราบว่า with มีผลเฉพาะตอน import เท่านั้นและจะไม่สามารถเปลี่ยนค่าได้ในภายหลัง

ตัวอย่างการใช้งานจริง: ปุ่มคอมโพเนนต์ (ตัวอย่างสมบูรณ์)

ลองออกแบบสไตล์ของปุ่มโดยใช้โมดูลกัน ก่อนอื่น แยกตัวแปรและมิกซ์อินออกเป็นโมดูลแยกต่างหาก

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;

• ตัวแปรเริ่มต้นสำหรับปุ่มกำหนดไว้ที่นี่ การกำหนด !default ทำให้ผู้ใช้งานสามารถเขียนทับค่าเหล่านี้ได้

 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}

• มิกซ์อินหลักสำหรับปุ่มถูกกำหนดไว้ที่นี่ สิ่งเหล่านี้ถูกแยกเพื่อความสะดวกในการนำกลับมาใช้ซ้ำ

 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}

• สไตล์ของปุ่มถูกสร้างขึ้นโดยอ้างอิง namespace ผ่าน @use เวอร์ชันหนึ่งถูกกำหนดเป็น .button--large

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

• โดย import โมดูล button คุณสามารถใช้งานสไตล์ของปุ่มได้ทันที

การเปลี่ยนธีม (โดยใช้ไฟล์ธีมหลายไฟล์)

การเปลี่ยนธีมสามารถทำได้โดยกำหนดค่า with หรือแยกธีมไว้ในโมดูลต่างหากและเปลี่ยนการใช้งานด้วย @use

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

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

• กำหนดสีของแบรนด์และการตั้งค่าอื่นๆ ในไฟล์ธีมหลายไฟล์ แล้วสลับใช้ขณะ build หรือ import

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

• เลือกธีมโดยใช้ with หรือ import เช่น @use 'themes/light' ขณะ build

ส่วนที่เป็น private และ public (ขีดล่างนำหน้า _ และ !default)

ใน SASS การเพิ่มขีดล่าง (_) หน้าชื่อไฟล์จะเป็นการกำหนดว่าเป็นไฟล์ partial อย่างไรก็ตาม เมื่อต้องการจัดการการแสดงผล export ของโมดูล ให้ใช้ show และ hide กับ @forward เพื่อควบคุมสิ่งที่จะส่งออก

คุณสามารถใช้ @forward เพื่อจัดระเบียบ public API และซ่อนสิ่งที่เป็น internal implementation จากภายนอก

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้งานจริง

ด้านล่างนี้คือแนวคิดพื้นฐานที่มีประโยชน์เมื่อใช้ SASS ในสถานการณ์จริง แนวทางเหล่านี้จะช่วยลดความสับสนระหว่างการพัฒนา และรักษาโครงสร้างโค้ดให้เป็นระเบียบ

• หากตัวแปรใดมีแนวโน้มจะเปลี่ยนแปลงตามธีม ให้เพิ่ม !default สิ่งนี้ทำให้ผู้ใช้สามารถแทนค่าต่าง ๆ ได้ง่ายขึ้น
• โมดูลควรถูกแบ่งตามความรับผิดชอบและเน้นเป้าหมายเดียว การแยกตัวแปร มิกซ์อิน และคอมโพเนนต์ออกจากกันจะช่วยให้จัดการได้ง่ายขึ้น
• จัดการเนื้อหาสาธารณะด้วย @forward และใช้ show หรือ hide ตามความจำเป็น การกำหนดขอบเขตของสิ่งที่เป็น public จะนำไปสู่การออกแบบที่ปลอดภัยยิ่งขึ้น
• ใช้ namespace เพื่อให้ทราบชัดว่าแต่ละฟังก์ชันมาจากโมดูลใด สิ่งนี้ช่วยป้องกันความสับสนกับโค้ดส่วนอื่น
• โปรดจำไว้ว่า with ใช้งานได้แค่ตอนที่ @use เท่านั้น เนื่องจากไม่สามารถเปลี่ยนแปลงได้ภายหลัง ให้ตั้งค่าตอน import
• ใส่ขีดล่างนำหน้าชื่อไฟล์เพื่อให้เป็น partial จะได้ไม่ถูกคอมไพล์แยกเดี่ยว สิ่งนี้ช่วยให้นำไฟล์มารวมกันเป็นโครงสร้างขนาดใหญ่ได้ง่ายขึ้น
• การรวมตัวอย่างการใช้งานไว้ในโมดูล index ช่วยในการทดสอบและเอกสารประกอบ สิ่งนี้ทำให้ผู้ใช้เข้าใจการทำงานได้ง่ายขึ้น

การคำนึงถึงประเด็นเหล่านี้จะช่วยให้คุณจัดการโปรเจกต์ขนาดใหญ่และรักษาความเป็นระเบียบของโค้ดในการทำงานเป็นทีม

สรุป

ระบบโมดูล SASS จัดระเบียบโค้ดสไตล์ผ่าน namespace, public APIs และการตั้งค่าที่ง่ายขึ้น การใช้ @use และ @forward อย่างคล่องแคล่วจะช่วยให้การพัฒนาเป็นทีม การเปลี่ยนธีม และการออกแบบไลบรารีทำได้ง่ายขึ้นมาก

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video