แผนที่ (Maps) ใน SASS
บทความนี้อธิบายเกี่ยวกับแผนที่ (Maps) ใน SASS
เราจะอธิบายตั้งแต่พื้นฐานจนถึงการใช้งานขั้นสูงของแผนที่ของ SASS พร้อมตัวอย่างการใช้งานจริง
YouTube Video
แผนที่ (Maps) ใน SASS
แผนที่ (Map) ใน SASS คืออะไร?
แผนที่ (Map) ใน SASS คือโครงสร้างข้อมูลที่เก็บข้อมูลในรูปแบบคู่ของคีย์และค่า คล้ายกับอ็อบเจกต์ใน JavaScript หรือดิกชันนารีใน Python การใช้แผนที่ใน SASS จะช่วยให้คุณจัดการสไตล์ที่ซับซ้อนได้อย่างรวบรัดและเพิ่มประสิทธิภาพในการดูแลรักษาโค้ด
ไวยากรณ์เบื้องต้นของแผนที่ (Map)
แผนที่ใน SASS จะถูกนิยามโดยใช้เครื่องหมายวงเล็บ () รูปแบบไวยากรณ์มีดังนี้:
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);
ตัวอย่างเช่น หากต้องการสร้างแผนที่เพื่อจัดการธีมสี คุณสามารถนิยามได้ดังนี้:
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
การดึงค่าจากแผนที่ (Map)
ใน SASS คุณสามารถใช้ฟังก์ชัน map.get()
เพื่อดึงค่าจากแผนที่
ตัวอย่างการใช้งาน:
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8.button {
9 background-color: map.get($colors, primary);
10}
ผลลัพธ์:
1.button {
2 background-color: #3498db;
3}
- โค้ดนี้จะดึงค่าสี
primary
จากแผนที่$colors
และนำไปใช้เป็นสีพื้นหลังของปุ่ม
การตั้งค่าคีย์และค่าในแผนที่
โดยใช้ฟังก์ชัน map.set()
คุณสามารถกำหนดค่าใหม่ให้กับคีย์ที่ต้องการ หากคีย์นั้นมีอยู่แล้ว ค่านั้นจะถูกเขียนทับ
ตัวอย่างการใช้งาน
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8// set danger color
9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12 background-color: map.get($updated-colors, danger);
13}
- โค้ดนี้จะเพิ่มคีย์
danger
เข้าไปในแผนที่ และนำค่าดังกล่าวไปใช้เป็นสีพื้นหลังของปุ่ม
ผลลัพธ์
1.button-danger {
2 background-color: #e74c3c;
3}
การลบคีย์ออกจากแผนที่
โดยใช้ฟังก์ชัน map.remove()
คุณสามารถลบคีย์และค่าที่ต้องการออกจากแผนที่
ตัวอย่างการใช้งาน
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71,
6 danger: #e74c3c
7);
8
9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13 background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17 background-color: map.get($reduced-colors, danger);
18}
- โค้ดนี้จะลบคีย์
danger
ออกจากแผนที่ ทำให้สีพื้นหลังของbutton-danger
เป็นnull
ผลลัพธ์
1.button-primary {
2 background-color: #3498db;
3}
การเพิ่มคีย์และค่าเข้าไปในแผนที่
โดยใช้ฟังก์ชัน map.merge()
คุณสามารถเพิ่มคีย์และค่าใหม่เข้าไปในแผนที่ที่มีอยู่แล้ว
ตัวอย่างการใช้งาน
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (danger: #e74c3c));
9
10.button-danger {
11 background-color: map.get($extended-colors, danger);
12}
- โค้ดนี้จะเพิ่มคีย์
danger
เข้าไปในแผนที่ SASS ที่มีอยู่เดิมและนำสีดังกล่าวไปใช้เป็นสีพื้นหลังของปุ่ม
ผลลัพธ์
1.button-danger {
2 background-color: #e74c3c;
3}
การเพิ่มคีย์และค่าหลายรายการเข้าไปในแผนที่
โดยใช้ฟังก์ชัน map.merge()
คุณสามารถเพิ่มคีย์และค่าใหม่หลายรายการเข้าไปในแผนที่เดิมได้ในครั้งเดียว
ตัวอย่างการใช้งาน
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (
9 danger: #e74c3c,
10 warning: #f39c12,
11 info: #8e44ad
12));
13
14.button-danger {
15 background-color: map.get($extended-colors, danger);
16}
- โค้ดนี้จะเพิ่มคีย์และค่าหลายรายการ ในเวลาเดียวกันไปยังแผนที่ SASS ที่มีอยู่
การตรวจสอบคีย์ในแผนที่
ฟังก์ชัน map.has-key()
ช่วยให้คุณตรวจสอบว่ามีคีย์ที่ต้องการอยู่ในแผนที่หรือไม่
ตัวอย่างการใช้งาน
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger); // false
การดึงคีย์หรือค่าทั้งหมดจากแผนที่
การดึงคีย์ทั้งหมด
โดยใช้ฟังก์ชัน map.keys()
คุณสามารถดึงคีย์ทั้งหมดออกมาได้
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)
การดึงค่าทั้งหมด
โดยใช้ฟังก์ชัน map.values()
คุณสามารถดึงค่าทั้งหมดได้
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)
การวนลูปผ่านแผนที่
ใน SASS คุณสามารถใช้คำสั่ง @each
เพื่อวนลูปผ่านแผนที่ได้
ตัวอย่างการใช้งาน
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $color in $colors {
8 .color-#{$name} {
9 background-color: $color;
10 }
11}
- โค้ดนี้จะวนลูปผ่านทุกคีย์และค่าของแผนที่ SASS และสร้างคลาสสำหรับแต่ละสีโดยอัตโนมัติ
ผลลัพธ์
1.color-primary {
2 background-color: #3498db;
3}
4
5.color-secondary {
6 background-color: #2ecc71;
7}
8
9.color-danger {
10 background-color: #e74c3c;
11}
การจัดการแผนที่ซ้อนกัน (Nested Maps)
แผนที่ยังสามารถมีโครงสร้างซ้อนกันได้อีกด้วย ในกรณีนี้ ให้ใช้ฟังก์ชัน map.get()
ซ้อนกัน
ตัวอย่างการใช้งาน
1@use "sass:map";
2
3$themes: (
4 light: (
5 background: #ffffff,
6 text: #000000
7 ),
8 dark: (
9 background: #000000,
10 text: #ffffff
11 )
12);
13
14body {
15 background-color: map.get(map.get($themes, light), background);
16 color: map.get(map.get($themes, light), text);
17}
- โค้ดนี้จะดึงสีพื้นหลังและสีข้อความของธีม
light
จากแผนที่ SASS ที่ซ้อนกันและนำไปใช้กับbody
ผลลัพธ์
1body {
2 background-color: #ffffff;
3 color: #000000;
4}
ตัวอย่างการใช้งานแผนที่: การออกแบบรองรับอุปกรณ์ (Responsive Design)
ด้วยการใช้แผนที่ คุณสามารถจัดการ media queries และ responsive design ได้อย่างง่ายดาย
ตัวอย่างการใช้งาน
1$breakpoints: (
2 small: 480px,
3 medium: 768px,
4 large: 1024px
5);
6
7@each $label, $size in $breakpoints {
8 @media (max-width: $size) {
9 .container-#{$label} {
10 width: 100%;
11 }
12 }
13}
- โค้ดนี้ใช้แผนที่ใน SASS ในการสร้างคลาสคอนเทนเนอร์สำหรับแต่ละ breakpoint โดยอัตโนมัติ
ผลลัพธ์
1@media (max-width: 480px) {
2 .container-small {
3 width: 100%;
4 }
5}
6
7@media (max-width: 768px) {
8 .container-medium {
9 width: 100%;
10 }
11}
12
13@media (max-width: 1024px) {
14 .container-large {
15 width: 100%;
16 }
17}
สรุป
แผนที่ใน SASS เป็นเครื่องมือที่ทรงพลังในการจัดระเบียบ stylesheet ของคุณ เพิ่มความยืดหยุ่นและนำกลับมาใช้ใหม่ได้ สามารถนำไปใช้ได้ในหลายสถานการณ์ เช่น การจัดการค่า การวนลูป และการทำ responsive design
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย