Bản đồ (Map) trong SASS
Bài viết này giải thích về bản đồ trong SASS.
Chúng tôi sẽ giải thích các kiến thức cơ bản đến nâng cao về bản đồ trong SASS, đồng thời cung cấp các ví dụ thực tế.
YouTube Video
Bản đồ (Map) trong SASS
Map trong SASS là gì?
Map trong SASS là một cấu trúc dữ liệu lưu trữ các cặp key-value, tương tự như object trong JavaScript hoặc dictionary trong Python. Bằng cách sử dụng bản đồ trong SASS, bạn có thể quản lý các kiểu phức tạp một cách ngắn gọn và nâng cao khả năng bảo trì.
Cú pháp cơ bản của bản đồ
Bản đồ trong SASS được khai báo bằng () (dấu ngoặc đơn). Cú pháp như sau:.
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);Ví dụ, để tạo một bản đồ cho quản lý chủ đề màu sắc, bạn có thể định nghĩa như sau:.
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);Lấy giá trị từ bản đồ
Trong SASS, bạn sử dụng hàm map.get() để lấy giá trị từ bản đồ.
Ví dụ sử dụng:
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}Kết quả xuất ra:
1.button {
2 background-color: #3498db;
3}- Đoạn mã này lấy giá trị màu
primarytừ bản đồ$colorsvà áp dụng làm màu nền cho nút bấm.
Thiết lập key và giá trị trong bản đồ
Sử dụng hàm map.set(), bạn có thể gán giá trị mới cho một key cụ thể. Nếu key đã tồn tại, giá trị của nó sẽ bị ghi đè.
Ví dụ sử dụng
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}- Đoạn mã này thêm key
dangervào bản đồ và đặt giá trị này làm màu nền cho nút bấm.
Kết quả xuất ra
1.button-danger {
2 background-color: #e74c3c;
3}Xóa key khỏi bản đồ
Bằng cách sử dụng hàm map.remove(), bạn có thể xóa một key và giá trị của nó khỏi bản đồ.
Ví dụ sử dụng
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}- Đoạn mã này xóa key
dangerkhỏi bản đồ, nên màu nền củabutton-dangersẽ lànull.
Kết quả xuất ra
1.button-primary {
2 background-color: #3498db;
3}Thêm key và giá trị vào bản đồ
Sử dụng hàm map.merge(), bạn có thể thêm những key và giá trị mới vào bản đồ đã có.
Ví dụ sử dụng
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}- Đoạn mã này thêm key
dangervào một bản đồ SASS đã tồn tại và thiết lập màu này làm màu nền cho nút bấm.
Kết quả xuất ra
1.button-danger {
2 background-color: #e74c3c;
3}Thêm nhiều key và giá trị vào bản đồ
Với hàm map.merge(), bạn có thể thêm nhiều key và giá trị mới vào bản đồ đã có cùng lúc.
Ví dụ sử dụng
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}- Đoạn mã này thêm nhiều key và giá trị vào bản đồ SASS hiện có cùng lúc.
Kiểm tra key trong bản đồ
Hàm map.has-key() cho phép bạn kiểm tra xem một key cụ thể có trong bản đồ không.
Ví dụ sử dụng
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); // falseLấy tất cả key hoặc giá trị từ bản đồ
Lấy tất cả key
Sử dụng hàm map.keys(), bạn có thể lấy tất cả các key.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)Lấy tất cả giá trị
Sử dụng hàm map.values(), bạn có thể lấy tất cả các giá trị.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)Lặp qua bản đồ
Trong SASS, bạn có thể sử dụng chỉ thị @each để lặp qua bản đồ.
Ví dụ sử dụng
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}- Đoạn mã này lặp qua từng key và giá trị trong bản đồ SASS và tự động tạo một class cho mỗi màu sắc.
Kết quả xuất ra
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}Xử lý bản đồ lồng nhau
Bản đồ cũng có thể có cấu trúc lồng nhau. Trong trường hợp này, hãy sử dụng hàm map.get() lồng nhau.
Ví dụ sử dụng
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}- Đoạn mã này lấy màu nền và màu chữ cho chủ đề
lighttừ một bản đồ SASS lồng nhau và áp dụng chúng cho phầnbody.
Kết quả xuất ra
1body {
2 background-color: #ffffff;
3 color: #000000;
4}Ứng dụng bản đồ: Thiết kế đáp ứng
Bằng cách sử dụng bản đồ, bạn có thể dễ dàng quản lý media queries và thiết kế đáp ứng.
Ví dụ sử dụng
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}- Đoạn mã này sử dụng bản đồ SASS để tự động tạo các class container đáp ứng cho từng breakpoint.
Kết quả xuất ra
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}Kết luận
Bản đồ SASS là một công cụ mạnh mẽ để tổ chức stylesheet, giúp tăng tính linh hoạt và khả năng tái sử dụng. Chúng có thể được sử dụng trong nhiều trường hợp, như quản lý giá trị, lặp và xây dựng thiết kế đáp ứng.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.