Articles
บทนำสู่ SASS/SCSS
แฟล็ก `!default` ใน SASS

แฟล็ก `!default` ใน SASS

บทความนี้อธิบายเกี่ยวกับธง !default ใน SASS

เราจะอธิบายเกี่ยวกับธง !default อย่างละเอียด และแสดงตัวอย่างการใช้งานจริง

YouTube Video

แฟล็ก !default ใน SASS

แฟล็ก !default ใน SASS เป็นเครื่องมือสำคัญที่ช่วยเพิ่มความเป็นโมดูลและการนำ stylesheet กลับมาใช้ซ้ำได้ โดยการใช้แฟล็กนี้ คุณสามารถตั้งค่าเริ่มต้นให้กับตัวแปร และยังให้ค่าที่กำหนดจากที่อื่นมีความสำคัญมากกว่าได้ ที่นี่ เราจะอธิบายแฟล็ก !default อย่างละเอียดและสาธิตวิธีการใช้งานด้วยตัวอย่างจริง

แฟล็ก !default เป็นคุณสมบัติเฉพาะของ SASS สำหรับตั้งค่าดีฟอลต์ให้กับตัวแปร การเพิ่มแฟล็กนี้ จะทำให้เกิดพฤติกรรมดังนี้:

  • การระบุค่าเริ่มต้น ค่าจะถูกกำหนดก็ต่อเมื่อตัวแปรยังไม่ได้ถูกกำหนดจากที่อื่น

  • ควบคุมลำดับความสำคัญ หากตัวแปรถูกกำหนดไว้แล้ว ค่านั้นจะไม่ถูกเขียนทับ

คุณสมบัตินี้มีประโยชน์เป็นอย่างมากในการสร้างโมดูลและไลบรารี ผู้ใช้สามารถตั้งค่าที่ต้องการเองได้ แต่หากไม่ได้ระบุไว้ จะใช้ค่าเริ่มต้นแทน

ตัวอย่างพื้นฐาน

โค้ดตัวอย่างด้านล่างนี้แสดงการใช้งานพื้นฐานของแฟล็ก !default

1// _variables.scss
2$primary-color: blue !default;
  • การกำหนดตัวแปรเริ่มต้น $primary-color โดยใช้แฟล็ก !default
1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}
  • การนำเข้าตัวแปรโดยใช้ @use และเขียนทับ $primary-color ด้วย with

ผลลัพธ์ CSS 

1body {
2    background-color: red;
3}
  • ในตัวอย่างนี้ เนื่องจากตั้งค่า $primary-color เป็น red ใน main.scss ดังนั้นค่า blue ที่กำหนดใน _variables.scss จะไม่ถูกใช้งาน

เมื่อไม่ได้กำหนดตัวแปรไว้

หากไม่ได้กำหนดตัวแปรไว้ใน main.scss จะใช้ค่าเริ่มต้นแทน

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}
  • เนื่องจากนำเข้าตัวแปรโดยไม่เขียนทับ จึงใช้ค่าเริ่มต้น blue ที่กำหนดไว้สำหรับ $primary-color ใน _variables.scss

ผลลัพธ์ CSS 

1body {
2    background-color: blue;
3}

การใช้งานภายในโมดูลซ้อน

การใช้ !default ภายในโมดูลช่วยให้สามารถปรับแต่งได้อย่างยืดหยุ่น

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;
  • การกำหนด $primary-color และ $button-color โดยใช้แฟล็ก !default
1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}
  • การนำเข้าโมดูล variables และกำหนดสีของ .button โดยใช้ตัวแปร $button-color
1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';
  • ใช้ @use พร้อมกับ with เพื่อเขียนทับ $button-color เป็น orange และใช้งานโมดูล buttons

ผลลัพธ์ CSS 

1.button {
2    color: orange;
3}
  • ด้วยวิธีนี้ โมดูลจะให้ค่าเริ่มต้น พร้อมเคารพค่าตัวแปรที่ผู้ใช้ตั้งไว้เอง

ข้อควรระวัง

เมื่อใช้แฟล็ก !default ควรพิจารณาประเด็นต่อไปนี้:

  • เลือกค่าเริ่มต้นให้เหมาะสม ควรเลือกค่าเริ่มต้นที่ครอบคลุมกรณีใช้งานทั่วไป

  • ออกแบบโดยตั้งใจ ควรใช้ชื่อตัวแปรให้สอดคล้องกัน และหลีกเลี่ยงการซ้ำกับโมดูลอื่น

  • ตรวจสอบลำดับ เพื่อให้แฟล็ก !default ทำงานได้ตามต้องการ ควรจัดลำดับการเขียนค่าตัวแปรให้ถูกต้อง

สถานการณ์การใช้งานจริง

การเปลี่ยนธีม

ตัวอย่างเช่น ในการสร้างไลบรารีที่รองรับหลายธีม คุณสามารถใช้ !default เพื่อกำหนดค่าเริ่มต้นที่ปรับแต่งได้

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}
  • การกำหนด $background-color และ $text-color สำหรับธีมโดยใช้แฟล็ก !default และนำไปใช้กับ body
1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);
  • ปรับแต่งธีมโดยเขียนทับ $background-color ด้วย @use และ with

ผลลัพธ์ CSS 

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

คอมโพเนนต์ที่นำกลับมาใช้ซ้ำได้

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

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}
  • การกำหนดสีพื้นหลังและสีตัวอักษรเริ่มต้นสำหรับปุ่มด้วย !default และนำไปใช้ในการกำหนดสไตล์
1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);
  • ปรับแต่งสีปุ่มโดยเขียนทับ $button-bg ด้วย @use และ with

ผลลัพธ์ CSS 

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

สรุปเกี่ยวกับแฟล็ก !default

แฟล็ก !default ใน SASS เป็นเครื่องมือที่มีประสิทธิภาพเมื่อคุณสร้างโมดูลและไลบรารี ช่วยเพิ่มการนำกลับมาใช้ซ้ำและรองรับการปรับแต่งที่ยืดหยุ่น

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

YouTube Video

ตัวแปร SASSแฟล็ก `!global` ใน SASS