การวนซ้ำใน SASS

บทความนี้อธิบายวิธีการจัดการการวนซ้ำใน SASS

เราจะอธิบายวิธีการวนซ้ำใน SASS ทีละขั้นตอน พร้อมตัวอย่างโค้ดจริง

YouTube Video

การวนซ้ำใน SASS

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

เหตุผลที่ควรใช้การวนซ้ำใน SASS

การใช้การวนซ้ำมีข้อดีหลายอย่าง เช่น

• การนำกลับมาใช้ใหม่ ของโค้ดดีขึ้น ทำให้ง่ายต่อการสร้างสไตล์รูปแบบคล้ายกัน
• ความง่ายในการดูแลรักษา สูงขึ้น สามารถแก้ไขสไตล์หลายอย่างพร้อมกันได้ง่าย
• ลดข้อผิดพลาด ได้ด้วย

เช่น สามารถสร้างสไตล์ของปุ่มที่มีหลายสีหรือคอมโพเนนต์ที่มีหลายขนาดได้พร้อมกันทั้งหมด

รูปแบบไวยากรณ์ที่ใช้สำหรับการวนซ้ำใน SASS

ไวยากรณ์หลักที่ใช้สำหรับการวนซ้ำใน SASS มีดังนี้:

• การใช้ @for สามารถวนซ้ำในช่วงตัวเลขที่กำหนดได้
• การใช้ @each สามารถวนซ้ำในลิสต์หรือแผนที่ (map)
• การใช้ @while จะวนซ้ำจนกว่าจะเข้าเงื่อนไขที่กำหนด

การวนซ้ำด้วย @for

@for ทำการประมวลผลซ้ำตามช่วงตัวเลขที่กำหนด

ไวยากรณ์

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/

• กำหนดค่าต้นทางและปลายทางสำหรับ <start> และ <end> การใช้ to จะไม่รวมค่าปลายทาง ส่วน through จะรวมค่าปลายทางด้วย

ตัวอย่าง

โค้ดต่อไปนี้จะสร้างคลาสขอบ (border) ที่หนาขึ้นทีละ 1px โดยอัตโนมัติ

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}

• โค้ดนี้จะสร้างคลาสสำหรับความหนาขอบที่เพิ่มขึ้นทีละ 1px โดยอัตโนมัติ ที่นี่ใช้คำสั่ง @for เพื่อวนซ้ำจาก 1 ถึง 5

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

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}

• คลาสตั้งแต่ .border-1 ถึง .border-5 จะถูกสร้างขึ้นต่อเนื่อง โดยแต่ละคลาสขอบจะหนาขึ้นทีละ 1px

การวนซ้ำด้วย @each

@each ใช้วนซ้ำกับลิสต์หรือแผนที่ (map) เหมาะสำหรับการสร้างคลาสซ้ำรูปแบบต่างๆ อย่างมีประสิทธิภาพ

ไวยากรณ์

1/*
2@each $item in <list> {
3  ...
4}
5*/

ตัวอย่างที่ 1: การใช้ลิสต์

โค้ดตัวอย่างด้านล่างจะสร้างคลาสสำหรับเปลี่ยนสีข้อความหลายชุด

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}

• โค้ดนี้จะสร้างคลาสสีข้อความสำหรับแต่ละสีในลิสต์โดยอัตโนมัติ ใช้คำสั่ง @each เพื่อวนซ้ำค่าทุกตัวในลิสต์ตามลำดับ

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

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}

• เมื่อไฟล์ SASS ถูกคอมไพล์เป็น CSS จะได้คลาส .text-red, .text-blue, .text-green สำหรับแต่ละสีในลิสต์

ตัวอย่างที่ 2: การใช้แผนที่ (map)

การใช้แผนที่ (map) จะทำให้จัดการกับคู่คีย์และค่าได้ ตัวอย่างต่อไปนี้กำหนดสีพื้นหลังของปุ่มด้วยแผนที่

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

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

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}

• เมื่อไฟล์ SASS ถูกคอมไพล์ จะได้คลาสเช่น .bg-primary, .bg-success, .bg-danger สำหรับแต่ละคีย์ในแผนที่

การวนซ้ำด้วย @while

@while จะวนซ้ำต่อไปเรื่อย ๆ ตราบที่เงื่อนไขยังเป็นจริง

ไวยากรณ์

1/*
2@while <condition> {
3  ...
4}
5*/

ตัวอย่าง

ตัวอย่างเช่น ถ้าต้องการปรับขนาดฟอนต์ทีละขั้น สามารถเขียนได้ดังนี้:

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}

• สามารถใช้คำสั่ง @while เพื่อวนซ้ำในการเพิ่มขนาดฟอนต์ทีละขั้น โดยใช้ตัวแปร $i จะสร้างคลาสอัตโนมัติสำหรับค่าตั้งแต่ 1 ถึง 5

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

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}

• เมื่อไฟล์ SASS ถูกคอมไพล์ จะสร้างคลาสที่ขนาดฟอนต์เพิ่มขึ้นตั้งแต่ 1rem ถึง 5rem โดยอัตโนมัติ

ตัวอย่างขั้นสูง: ผสมผสานการวนซ้ำและการซ้อน (Nesting)

การรวมการวนซ้ำกับคุณสมบัติ nesting ของ SASS ช่วยให้สร้างสไตล์ที่ซับซ้อนได้มากขึ้น

ตัวอย่าง

ด้านล่างเป็นตัวอย่างที่กำหนดสีพื้นหลังและสีเมื่อโฮเวอร์ของปุ่มไว้ด้วยกัน

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}

• โดยการผสมผสานระหว่างการวนซ้ำและการซ้อนกันของ SASS คุณสามารถสร้างสีพื้นหลังของปุ่มและสีเมื่อโฮเวอร์ได้พร้อมกันในครั้งเดียว สำหรับแต่ละสีในแผนที่ จะมีการสร้างคลาส .btn- และกำหนดรูปแบบ :hover โดยใช้การซ้อนกัน

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

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}

• เมื่อคุณแปลงไฟล์ SASS เป็น CSS สีพื้นหลังและสีเมื่อโฮเวอร์ของแต่ละปุ่มจะถูกสร้างขึ้นโดยอัตโนมัติ และรูปแบบ :hover จะถูกกำหนดรวมกันโดยใช้การซ้อนโค้ด

ข้อควรระวังเมื่อใช้การวนซ้ำ

ให้คำนึงถึงข้อเหล่านี้เมื่อใช้การวนซ้ำ เพื่อให้เขียนโค้ดได้อย่างมีประสิทธิภาพและอ่านง่าย

1. หลีกเลี่ยงการซ้อนกันหลายชั้นเกินไป การซ้อนกันหลายชั้นจะลดความอ่านง่ายของโค้ด ควรซ้อนเท่าที่จำเป็น

2. ควรพิจารณาผลกระทบต่อประสิทธิภาพ หากมีคลาสจำนวนมากที่ถูกสร้างจากการวนซ้ำ ไฟล์ CSS อาจมีขนาดใหญ่โดยไม่จำเป็น

3. ใช้ชื่อตัวแปรที่เหมาะสม สำหรับตัวแปรเช่น $i หรือ $item ควรใช้ชื่อที่สื่อความหมาย เพื่อให้โค้ดเข้าใจง่ายขึ้น

สรุป

การใช้การวนซ้ำใน SASS ช่วยให้การออกแบบสไตล์เป็นไปอย่างมีประสิทธิภาพและดูแลรักษาง่าย โดยเฉพาะอย่างยิ่ง การเลือกใช้ระหว่าง @for, @each และ @while จะช่วยให้สามารถสร้าง CSS ที่ยืดหยุ่นและปรับเปลี่ยนได้ง่าย

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

YouTube Video