รายชื่อใน SASS

รายชื่อใน SASS

บทความนี้อธิบายเกี่ยวกับรายชื่อใน SASS

เราจะครอบคลุมพื้นฐานและการใช้งานขั้นสูงของรายชื่อใน SASS พร้อมตัวอย่างเชิงปฏิบัติ

YouTube Video

รายชื่อใน SASS

SASS เสนอลักษณะการเขียนโปรแกรมที่มีประโยชน์ในฐานะส่วนขยายของ CSS ในหมู่คุณสมบัติเหล่านี้ รายชื่อเป็นฟีเจอร์ที่มีประโยชน์มากเมื่อกำหนดสไตล์แบบไดนามิก

รายชื่อใน SASS คืออะไร?

รายชื่อใน SASS คือกลุ่มของค่า ที่คั่นด้วยเครื่องหมายจุลภาค (,) หรือช่องว่าง ใช้เมื่อส่งค่าหลายค่าให้กับคุณสมบัติ CSS หรือสำหรับการทำซ้ำ

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

คุณสมบัติหลักของรายชื่อประกอบด้วยประเด็นดังนี้:

  • รายชื่อสามารถประกอบด้วยค่าของประเภทข้อมูลใดก็ได้ เช่น จำนวน ตัวอักษร หรือสี
  • คุณสามารถเลือกใช้รายชื่อที่คั่นด้วยจุลภาคหรือช่องว่างตามความเหมาะสม

ตัวอย่างพื้นฐานของการกำหนดสไตล์ด้วยรายชื่อ

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

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

ผลลัพธ์การคอมไพล์

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}
  • ด้วยฟังก์ชัน nth() ของโมดูล sass:list คุณสามารถดึงค่าที่ต้องการจากรายการได้

การจัดการรายชื่อ

sass:list โมดูลมีฟังก์ชันสำหรับจัดการรายการ ทำให้ง่ายต่อการดึงและเพิ่มข้อมูลในรายการ

ดึงองค์ประกอบ: nth()

nth() เป็นฟังก์ชันที่ใช้ดึงองค์ประกอบจากรายชื่อ

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red
  • ในโค้ดนี้ ใช้ฟังก์ชัน nth() เพื่อรับค่าที่ตำแหน่งที่กำหนดในรายชื่อ

ตรวจสอบตำแหน่ง: index()

index() เป็นฟังก์ชันที่ใช้คืนค่าตำแหน่งของข้อมูลในรายการ

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
  • ในโค้ดนี้ index() ถูกใช้เพื่อค้นหาว่า blue เป็นข้อมูลลำดับที่สามในรายการ

รับความยาวของรายชื่อ: length()

length() เป็นฟังก์ชันที่คืนค่าความยาวของรายชื่อ

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
  • ในโค้ดนี้ ใช้ฟังก์ชัน length() เพื่อรับจำนวนค่าที่อยู่ในรายชื่อ

เพิ่มองค์ประกอบ: append()

append() เป็นฟังก์ชันที่ใช้เพิ่มองค์ประกอบเข้าในรายชื่อ

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
  • ในโค้ดนี้ ใช้ฟังก์ชัน append() เพื่อเพิ่มค่าเข้าในรายชื่อ

แทนที่ข้อมูล: set-nth()

set-nth() เป็นฟังก์ชันที่ใช้แทนที่ข้อมูลที่ตำแหน่งที่ระบุด้วยค่าข้อมูลใหม่

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
  • ในโค้ดนี้ set-nth() ถูกใช้เพื่อแทนที่ข้อมูลตัวที่สองด้วย yellow

รวมรายการ: join()

join() เป็นฟังก์ชันที่ใช้รวมรายการสองรายการเข้าด้วยกัน

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d
  • ในโค้ดนี้ join() ถูกใช้เพื่อรวมรายการสองรายการให้เป็นรายการเดียว

จับคู่รายการ: zip()

zip() เป็นฟังก์ชันที่ใช้จัดกลุ่มรายการหลายๆ รายการแบบจับคู่แต่ละข้อมูลเข้าด้วยกัน

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)
  • ในโค้ดนี้ zip() ถูกใช้เพื่อรวมชื่อและอายุเป็นคู่

รายชื่อซ้อนกัน

รายชื่อสามารถซ้อนกันได้ เพื่อให้สามารถใช้งานเหมือนอาเรย์สองมิติ

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red
  • การจัดการโครงสร้างข้อมูลที่ซับซ้อนเช่นนี้ ทำให้การสร้างสไตล์ขั้นสูงเป็นไปได้

ตัวอย่างเชิงปฏิบัติ: การสร้างเกรเดียนท์

นี่คือตัวอย่างของการสร้างเกรเดียนท์อย่างมีประสิทธิภาพด้วยรายชื่อ

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

ผลลัพธ์การคอมไพล์

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}
  • โค้ดนี้เป็นตัวอย่างของการสร้างเกรเดียนท์โดยอัตโนมัติด้วยรายชื่อใน SCSS

    • สีที่ใช้ในเกรเดียนท์กำหนดในรายชื่อ $colors
    • ในฟังก์ชัน gradient() คำนวณตำแหน่งและกำหนดให้แต่ละสีอย่างเท่าเทียมกันตามจำนวนสี เพื่อสร้างรายชื่อสีสำหรับเกรเดียนท์
    • ในคลาส .background ใช้ linear-gradient เพื่อรวมรายชื่อสีที่สร้างขึ้นและใช้เกรเดียนท์แนวนอน
  • เนื่องจากการคำนวณตำแหน่งอัตโนมัติตามความยาวของรายชื่อสี คุณสามารถสร้างเกรเดียนท์ที่สมดุลได้ง่าย ๆ โดยการเพิ่มหรือเปลี่ยนสี

คำเตือนและแนวปฏิบัติที่ดีที่สุด

ประเด็นต่อไปนี้ควรพิจารณาเมื่อใช้รายชื่อ:

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

  • ขนาดของรายชื่อ เมื่อจัดการรายชื่อแบบไดนามิก ควรตรวจสอบขนาดด้วยฟังก์ชัน length() อย่างปลอดภัย

  • การจัดการรายชื่อซ้อน เมื่อจัดการรายชื่อซ้อน การดำเนินการกับดัชนีอย่างระมัดระวังสามารถช่วยหลีกเลี่ยงข้อผิดพลาด

สรุป

รายชื่อใน SASS เป็นเครื่องมือทรงพลังสำหรับกำหนดสไตล์แบบไดนามิกและจัดการการออกแบบที่ซับซ้อนได้อย่างมีประสิทธิภาพ

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

YouTube Video