Chức năng danh sách Sass
Chức năng danh sách Sass
Các hàm danh sách được sử dụng để truy cập các giá trị trong danh sách, kết hợp danh sách và thêm các mục vào danh sách.
Danh sách Sass là bất biến (chúng không thể thay đổi). Vì vậy, các hàm danh sách trả về một danh sách sẽ trả về một danh sách mới và không thay đổi danh sách ban đầu.
Danh sách Sass dựa trên 1. Mục danh sách đầu tiên trong danh sách nằm ở chỉ mục 1, không phải 0.
Bảng sau liệt kê tất cả các hàm danh sách trong Sass:
Function | Description & Example |
---|---|
append( list , value , [ separator ]) | Adds a single value to the end of the list. separator
can be auto, comma, or space. auto is default. Example: append((a b c), d) Result: a b c d append((a b c), (d), comma) Result: a, b, c, d |
index( list , value ) | Returns the index position for the value in list. Example: index(a b c, b) Result: 2 index(a b c, f) Result: null |
is-bracketed( list ) | Checks whether the list has square brackets. Example: is-bracketed([a b c]) Result: true is-bracketed(a b c) Result: false |
join( list1 , list2 , [ separator, bracketed ]) | Appends list2 to the end of list1 . separator
can be auto, comma, or space. auto is default (will use the separator in the
first list). bracketed can be auto, true, or false. auto is default. Example: join(a b c, d e f) Result: a b c d e f join((a b c), (d e f), comma) Result: a, b, c, d, e, f join(a b c, d e f, $bracketed: true) Result: [a b c d e f] |
length( list ) | Returns the length of the list. Example: length(a b c) Result: 3 |
list-separator( list ) | Returns the list separator used, as a string. Can be either space or
comma. Example: list-separator(a b c) Result: "space" list-separator(a, b, c) Result: "comma" |
nth( list , n ) | Returns the n th element in the list. Example: nth(a b c, 3) Result: c |
set-nth( list , n , value ) | Sets the n th list element to the value specified. Example: set-nth(a b c, 2, x) Result: a x c |
zip( lists ) | Combines lists into a single multidimensional list. Example: zip(1px 2px 3px, solid dashed dotted, red green blue) Result: 1px solid red, 2px dashed green, 3px dotted blue |