แผนที่ (Maps) ใน SASS

แผนที่ (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 ด้วย

YouTube Video