Danh sách trong SASS

Articles

Bài viết này giải thích về danh sách trong SASS.

Chúng tôi sẽ giới thiệu các kiến thức cơ bản và nâng cao về danh sách trong SASS cũng như cung cấp các ví dụ thực tế.

YouTube Video

Danh sách trong SASS

SASS cung cấp các tính năng giống như lập trình hữu ích như một phần mở rộng của CSS. Trong số đó, danh sách là một tính năng rất hữu ích khi xác định kiểu dáng một cách động.

Danh sách trong SASS là gì?

Một danh sách trong SASS là tập hợp các giá trị được phân cách bởi dấu phẩy (,) hoặc khoảng trắng. Chúng được sử dụng khi truyền nhiều giá trị cho thuộc tính CSS hoặc khi lặp qua nhiều giá trị.

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

Các tính năng chính của danh sách bao gồm những điểm sau:.

Một danh sách có thể chứa các giá trị với bất cứ kiểu dữ liệu nào, như số, chuỗi hoặc màu sắc.
Bạn có thể lựa chọn giữa danh sách phân tách bằng dấu phẩy hoặc bằng khoảng trắng tùy theo trường hợp sử dụng.

Ví dụ cơ bản về định nghĩa kiểu dáng sử dụng danh sách

Dưới đây là một ví dụ về việc tạo động các kiểu viền đơn giản bằng cách sử dụng danh sách.

 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}

Kết quả biên dịch

 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}

Với hàm nth() của module sass:list, bạn có thể lấy một giá trị cụ thể từ danh sách.

Thao tác với danh sách

Mô-đun sass:list cung cấp các hàm để thao tác với danh sách, giúp dễ dàng truy xuất và thêm phần tử..

Lấy phần tử: `nth()`

nth() là một hàm dùng để lấy một phần tử từ một danh sách.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

Trong đoạn mã này, hàm nth() được sử dụng để lấy giá trị tại vị trí chỉ định.

Kiểm tra chỉ mục: `index()`

index() là một hàm trả về vị trí của một phần tử trong danh sách.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

Trong đoạn mã này, index() được sử dụng để lấy vị trí của phần tử blue là phần tử thứ ba trong danh sách.

Lấy độ dài danh sách: `length()`

length() là một hàm trả về số lượng phần tử trong một danh sách.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

Trong đoạn mã này, hàm length() được sử dụng để lấy số lượng giá trị trong danh sách.

Thêm phần tử: `append()`

append() là một hàm dùng để thêm phần tử vào danh sách.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

Trong đoạn mã này, hàm append() được sử dụng để thêm một giá trị vào danh sách.

Thay thế phần tử: `set-nth()`

set-nth() là một hàm thay thế phần tử tại một vị trí xác định bằng giá trị khác.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue

Trong đoạn mã này, set-nth() được sử dụng để thay thế phần tử thứ hai bằng yellow.

Kết hợp danh sách: `join()`

join() là một hàm kết hợp hai danh sách.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

Trong đoạn mã này, join() được sử dụng để kết hợp hai danh sách thành một.

Ghép cặp danh sách: `zip()`

zip() là một hàm ghép các phần tử của nhiều danh sách với nhau theo từng cặp.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)

Trong đoạn mã này, zip() được sử dụng để kết hợp tên và độ tuổi thành các cặp.

Danh sách lồng nhau

Danh sách cũng có thể lồng nhau, cho phép sử dụng như một mảng hai chiều.

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

Bằng cách xử lý các cấu trúc dữ liệu phức tạp này, việc tạo kiểu nâng cao trở nên khả thi.

Ví dụ thực tế: Tạo gradient

Dưới đây là một ví dụ về việc tạo gradient hiệu quả bằng cách sử dụng danh sách.

 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}

Kết quả biên dịch

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

Đoạn mã này là ví dụ về việc tự động tạo gradient bằng danh sách trong SCSS.
- Các màu dùng cho gradient được định nghĩa trong danh sách $colors.
- Trong hàm gradient(), vị trí được tính toán và phân phối đều cho mỗi màu dựa trên số lượng màu, tạo thành danh sách cho gradient.
- Trong lớp .background, thuộc tính linear-gradient được sử dụng để kết hợp danh sách màu đã tạo và áp dụng gradient ngang.
Vì các vị trí được tính toán tự động dựa trên độ dài của danh sách màu, bạn có thể dễ dàng tạo gradient đều nhau khi thêm hoặc thay đổi màu sắc.

Lưu ý và các thực tiễn tốt

Có thể cân nhắc các điểm sau khi sử dụng danh sách:.

Loại ký tự phân tách danh sách Danh sách phân tách bằng dấu phẩy và khoảng trắng sẽ được xử lý khác nhau, nên bạn cần lựa chọn phù hợp với từng trường hợp.
Kích thước danh sách Khi thao tác động với danh sách, nên kiểm tra kích thước bằng hàm length() để đảm bảo an toàn.
Quản lý danh sách lồng nhau Khi xử lý danh sách lồng nhau, việc thao tác chỉ số cẩn thận sẽ giúp tránh lỗi.

Kết luận

Danh sách trong SASS là một công cụ mạnh mẽ để định nghĩa kiểu dáng động và quản lý hiệu quả các thiết kế phức tạp.

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.

YouTube Video

Chuỗi trong SASS Bản đồ (Map) trong SASS

Danh sách trong SASS

YouTube Video

Danh sách trong SASS

Danh sách trong SASS là gì?

Ví dụ cơ bản về định nghĩa kiểu dáng sử dụng danh sách

Kết quả biên dịch

Thao tác với danh sách

Lấy phần tử: nth()

Kiểm tra chỉ mục: index()

Lấy độ dài danh sách: length()

Thêm phần tử: append()

Thay thế phần tử: set-nth()

Kết hợp danh sách: join()

Ghép cặp danh sách: zip()

Danh sách lồng nhau

Ví dụ thực tế: Tạo gradient

Kết quả biên dịch

Lưu ý và các thực tiễn tốt

Kết luận

YouTube Video

Lấy phần tử: `nth()`

Kiểm tra chỉ mục: `index()`

Lấy độ dài danh sách: `length()`

Thêm phần tử: `append()`

Thay thế phần tử: `set-nth()`

Kết hợp danh sách: `join()`

Ghép cặp danh sách: `zip()`