ฟังก์ชัน `if` ใน SASS

บทความนี้อธิบายฟังก์ชัน if ใน SASS

เราจะพาคุณไล่ตั้งแต่พื้นฐานของฟังก์ชัน if ไปจนถึงเทคนิคขั้นสูง แบบทีละขั้นตอน

YouTube Video

ฟังก์ชัน if ใน SASS

ฟังก์ชัน if() เป็นฟังก์ชันเชิงเงื่อนไขแบบง่ายที่มีใน SASS ซึ่งจะคืนค่าหนึ่งในสองค่าโดยอิงตามเงื่อนไขแบบบูลีน มีความคล้ายกับตัวดำเนินการแบบสามทาง (ternary) ของ JavaScript

ไวยากรณ์

ไวยากรณ์มีดังนี้:

1// if(condition, trueValue, falseValue)

• ถ้า condition เป็นจริง จะคืนค่า trueValue หากเป็นเท็จ จะคืนค่า falseValue

การใช้งานพื้นฐาน

ตัวอย่างเช่น คุณสามารถใช้ฟังก์ชัน if() เพื่อเปลี่ยนสีพื้นหลังและสีข้อความตามว่าธีมเป็นแบบมืดหรือสว่าง

โค้ดตัวอย่าง

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}

• ถ้าตัวแปร $theme เป็น "dark" พื้นหลังจะเป็นสีดำพร้อมข้อความสีขาว; ถ้าเป็น "light" พื้นหลังจะเป็นสีขาวพร้อมข้อความสีดำ

CSS ที่ถูกสร้างขึ้น

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

• เนื่องจากตัวแปร $theme เป็น "dark" พื้นหลังจึงเป็นสีดำและข้อความเป็นสีขาว

ความแตกต่างระหว่างคำสั่ง @if และฟังก์ชัน if()

Sass มีคำสั่ง @if และฟังก์ชัน if() สำหรับการแตกแขนงตามเงื่อนไข แต่ทั้งสองถูกใช้เพื่อวัตถุประสงค์ที่ต่างกัน

โค้ดตัวอย่าง

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}

• คำสั่ง @if ควบคุมว่าโค้ดส่วนใดจะถูกส่งออกในระหว่างการคอมไพล์ของ Sass
• ในทางกลับกัน ฟังก์ชัน if() จะส่งคืนค่า และใช้สำหรับสลับค่าแบบไดนามิกภายในนิพจน์

CSS ที่ถูกสร้างขึ้น

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

• ในตัวอย่างนี้ เนื่องจาก $theme เป็น "dark" จึงใช้พื้นหลังสีดำและสีข้อความเป็นสีขาว
• ความแตกต่างสำคัญสองประการคือ คำสั่ง @if ใช้ควบคุมโครงสร้าง ส่วนฟังก์ชัน if() จะส่งคืนค่า

การใช้ฟังก์ชัน if แบบซ้อนกัน

เมื่อคุณต้องการการแตกแขนงที่ซับซ้อน คุณสามารถซ้อนฟังก์ชัน if ได้

โค้ดตัวอย่าง

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}

• ถ้า $theme เป็น "dark" จะคืนค่าสีดำ; ถ้าเป็น "light" จะคืนค่าสีขาว; กรณีอื่นจะคืนค่าเริ่มต้น ($custom-color)

CSS ที่ถูกสร้างขึ้น

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

• เนื่องจากตัวแปร $theme เป็น custom สีพื้นหลังจึงเป็นสีน้ำเงิน

กรณีการใช้งานจริง

การสลับธีม

ด้านล่างคือตัวอย่างที่เปลี่ยนสไตล์ปุ่มตามธีม

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}

• โค้ดนี้เป็นตัวอย่างเงื่อนไขของ SASS ที่สลับสีพื้นหลัง สีข้อความ และสีเส้นขอบของปุ่มตามค่าของตัวแปร $theme ฟังก์ชัน if() ถูกใช้เพื่อกำหนดสไตล์สำหรับธีมมืดและสว่างแบบไดนามิก

CSS ที่ถูกสร้างขึ้น

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}

• ด้วยการสลับธีม คุณสามารถปรับดีไซน์โดยรวมให้เปลี่ยนไปอย่างสม่ำเสมอ

ตัวอย่างขั้นสูง: การตั้งค่าความคอนทราสต์ของสีแบบไดนามิก

มาดูตัวอย่างที่ตั้งค่าสีข้อความโดยอัตโนมัติตามสีพื้นหลัง

โค้ดตัวอย่าง

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}

• ฟังก์ชัน color.channel() ใช้เพื่อดึงค่าความสว่างของสีพื้นหลัง (lightness) หากค่านั้นมากกว่า 50% จะเลือกสีดำ; หากน้อยกว่า จะเลือกสีขาวเป็นสีข้อความ โดยปรับความคอนทราสต์กับพื้นหลังโดยอัตโนมัติ

CSS ที่ถูกสร้างขึ้น

1body {
2  background-color: #000;
3  color: white;
4}

• ด้วยการใช้ฟังก์ชัน if() คุณสามารถสร้างสไตล์ที่ยืดหยุ่นซึ่งคำนึงถึงการเข้าถึงในการออกแบบ เช่น การปรับคอนทราสต์

การผสานกับ @function

การใช้ฟังก์ชัน if ภายใน @function ช่วยให้การออกแบบสไตล์ยืดหยุ่นยิ่งขึ้น

โค้ดตัวอย่าง

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}

• โค้ดนี้สาธิตการใช้ if() ภายใน @function เพื่อคืนค่าสีที่เหมาะสมตามธีมและประเภทสี วิธีนี้ช่วยให้การออกแบบสไตล์ของแต่ละธีมมีความสอดคล้องและนำกลับมาใช้ซ้ำได้

CSS ที่ถูกสร้างขึ้น

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

• ด้วยการสร้างและใช้ฟังก์ชันตัวช่วยที่ใช้ประโยชน์จาก if() คุณสามารถปรับปรุงความสามารถในการบำรุงรักษาของทั้งโปรเจกต์ได้

หมายเหตุ

1. ฟังก์ชัน if ไม่สามารถใช้กับค่าแบบไดนามิกได้ เนื่องจาก CSS เองเป็นภาษาคงที่ ฟังก์ชัน if จึงกำหนดค่าในตอนที่คอมไพล์ SASS สำหรับลอจิกแบบมีเงื่อนไขที่ทำงานขณะรันไทม์ คุณจำเป็นต้องใช้ JavaScript

2. ให้ความสำคัญกับความอ่านง่าย เนื่องจากฟังก์ชัน if ที่ซ้อนกันอาจซับซ้อนและทำให้การอ่านยากขึ้น คุณสามารถใช้ SASS @mixin และ @function ตามความจำเป็นเพื่อจัดระเบียบโค้ดของคุณ

สรุป

ฟังก์ชัน if ของ SASS เป็นเครื่องมือทรงพลังที่คืนค่าที่แตกต่างกันตามเงื่อนไข มีประโยชน์ไม่เพียงแค่เงื่อนไขแบบง่าย แต่ยังใช้ได้ในหลายกรณี เช่น การสลับธีมและการตั้งค่าสไตล์แบบไดนามิก อย่างไรก็ตาม เมื่อจัดการกับเงื่อนไขที่ซับซ้อน ควรใส่ใจเรื่องความอ่านง่าย และใช้ประโยชน์จาก @mixin และ @function เพื่อเพิ่มความสามารถในการดูแลรักษา

ด้วยการเชี่ยวชาญฟังก์ชัน if คุณจะสามารถออกแบบสไตล์ได้อย่างมีประสิทธิภาพและยืดหยุ่นมากขึ้น

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

YouTube Video