Lặp trong SASS
Bài viết này giải thích cách xử lý lặp trong SASS.
Chúng tôi sẽ giải thích cách thực hiện lặp trong SASS một cách từng bước với các ví dụ mã thực tế.
YouTube Video
Lặp trong SASS
Lặp trong SASS giúp tránh lặp lại mã và cho phép bạn tạo ra các kiểu linh hoạt và có thể tái sử dụng.
Lý do sử dụng lặp trong SASS
Có một số lợi ích khi sử dụng lặp, chẳng hạn như sau:.
- Khả năng tái sử dụng của mã được cải thiện, giúp dễ dàng tạo ra các kiểu mẫu tương tự.
- Khả năng bảo trì được nâng cao, giúp dễ dàng thay đổi các kiểu cùng lúc.
- Giảm thiểu lỗi nữa.
Ví dụ, bạn có thể tạo kiểu cho các nút với nhiều màu khác nhau hoặc các thành phần với nhiều kích thước cùng lúc.
Cú pháp sử dụng cho vòng lặp trong SASS
Cú pháp chính được sử dụng cho lặp trong SASS như sau:.
- Sử dụng
@for, bạn có thể lặp trong một phạm vi số xác định. - Sử dụng
@each, bạn có thể lặp qua các danh sách hoặc bản đồ trong quá trình lặp. - Sử dụng
@while, bạn có thể lặp cho đến khi một điều kiện nhất định được đáp ứng.
Lặp sử dụng @for
@for thực hiện xử lý lặp lại dựa trên một phạm vi số được chỉ định.
Cú pháp
1/*
2@for $i from <start> to <end> {
3 ...
4}
5
6@for $i from <start> through <end> {
7 ...
8}
9*/- Xác định giá trị bắt đầu và kết thúc cho
<start>và<end>. Sử dụngtoloại trừ giá trị kết thúc, trong khithroughbao gồm nó.
Ví dụ
Đoạn mã sau tự động tạo các lớp với độ dày viền tăng dần 1px mỗi lớp.
1@for $i from 1 through 5 {
2 .border-#{$i} {
3 border-width: #{$i}px;
4 }
5}- Mã này tự động tạo các lớp với độ dày viền tăng thêm 1px mỗi lần. Chỉ thị
@forđược sử dụng ở đây để lặp từ 1 đến 5.
CSS được tạo ra
1.border-1 {
2 border-width: 1px;
3}
4.border-2 {
5 border-width: 2px;
6}
7.border-3 {
8 border-width: 3px;
9}
10.border-4 {
11 border-width: 4px;
12}
13.border-5 {
14 border-width: 5px;
15}- Các lớp từ
.border-1đến.border-5sẽ được tạo lần lượt, mỗi lớp viền dày thêm 1px.
Lặp sử dụng @each
@each thực hiện lặp sử dụng các danh sách hoặc bản đồ. Nó hữu ích khi bạn muốn tạo các lớp theo mẫu một cách hiệu quả.
Cú pháp
1/*
2@each $item in <list> {
3 ...
4}
5*/Ví dụ 1: Sử dụng danh sách
Đoạn mã sau tạo ra nhiều lớp màu chữ.
1@each $color in ("red", "blue", "green") {
2 .text-#{$color} {
3 color: #{$color};
4 }
5}- Đoạn mã này tự động tạo ra các lớp màu chữ cho từng màu trong danh sách. Chỉ thị
@eachđược sử dụng để xử lý từng giá trị trong danh sách lần lượt.
CSS được tạo ra
1.text-red {
2 color: red;
3}
4.text-blue {
5 color: blue;
6}
7.text-green {
8 color: green;
9}- Khi file SASS được biên dịch thành CSS, các lớp như
.text-red,.text-blue, và.text-greenđược tạo ra cho mỗi màu trong danh sách.
Ví dụ 2: Sử dụng bản đồ (map)
Sử dụng bản đồ cho phép bạn xử lý các cặp khóa và giá trị. Trong ví dụ sau, màu nền các nút được định nghĩa bằng một bản đồ.
1$colors: (
2 primary: #3498db,
3 success: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $hex in $colors {
8 .bg-#{$name} {
9 background-color: #{$hex};
10 }
11}CSS được tạo ra
1.bg-primary {
2 background-color: #3498db;
3}
4.bg-success {
5 background-color: #2ecc71;
6}
7.bg-danger {
8 background-color: #e74c3c;
9}- Khi file SASS được biên dịch thành CSS, các lớp như
.bg-primary,.bg-successvà.bg-dangerđược tạo ra cho mỗi khóa trong bản đồ.
Lặp sử dụng @while
@while tiếp tục lặp miễn là điều kiện còn đúng.
Cú pháp
1/*
2@while <condition> {
3 ...
4}
5*/Ví dụ
Ví dụ, nếu bạn muốn tăng dần kích thước phông chữ, bạn có thể viết như sau:.
1$i: 1;
2
3@while $i <= 5 {
4 .font-#{$i} {
5 font-size: #{$i}rem;
6 }
7 $i: $i + 1;
8}- Bạn có thể sử dụng chỉ thị
@whileđể xử lý lặp khi tăng kích thước phông chữ theo từng bước. Bằng cách sử dụng biến $i, các lớp được tự động tạo ra cho các giá trị từ 1 đến 5.
CSS được tạo ra
1.font-1 {
2 font-size: 1rem;
3}
4.font-2 {
5 font-size: 2rem;
6}
7.font-3 {
8 font-size: 3rem;
9}
10.font-4 {
11 font-size: 4rem;
12}
13.font-5 {
14 font-size: 5rem;
15}- Khi file SASS được biên dịch thành CSS, các lớp với kích thước phông từ 1rem đến 5rem sẽ tự động được tạo ra.
Ví dụ nâng cao: Kết hợp lặp và lồng nhau trong SASS
Kết hợp lặp với tính năng lồng nhau của SASS cho phép tạo ra các kiểu nâng cao hơn nữa.
Ví dụ
Dưới đây là một ví dụ trong đó màu nền và màu hover của các nút được định nghĩa cùng nhau.
1@use "sass:color";
2
3$colors: (
4 primary: #3498db,
5 success: #2ecc71,
6 danger: #e74c3c
7);
8
9@each $name, $hex in $colors {
10 .btn-#{$name} {
11 background-color: $hex;
12 color: white;
13
14 &:hover {
15 background-color: color.scale($hex, $lightness: -10%);
16 }
17 }
18}- Bằng cách kết hợp vòng lặp và lồng nhau trong SASS, bạn có thể tạo màu nền và màu khi di chuột cho nút chỉ trong một lần. Đối với mỗi màu trong bản đồ, một lớp
.btn-sẽ được tạo và kiểu dáng:hoverđược xác định bằng cách sử dụng lồng nhau.
CSS được tạo ra
1.btn-primary {
2 background-color: #3498db;
3 color: white;
4}
5.btn-primary:hover {
6 background-color: #2980b9;
7}
8.btn-success {
9 background-color: #2ecc71;
10 color: white;
11}
12.btn-success:hover {
13 background-color: #27ae60;
14}
15.btn-danger {
16 background-color: #e74c3c;
17 color: white;
18}
19.btn-danger:hover {
20 background-color: #c0392b;
21}- Khi bạn chuyển đổi tệp SASS sang CSS, màu nền và màu khi di chuột cho mỗi nút sẽ được tự động tạo ra, và các kiểu :hover được định nghĩa chung bằng cách sử dụng lồng nhau.
Lưu ý khi sử dụng vòng lặp
Hãy ghi nhớ các điểm sau khi sử dụng vòng lặp để viết mã hiệu quả và dễ đọc hơn.
-
Tránh lồng nhau quá sâu Lồng nhau quá mức làm giảm tính dễ đọc, vì vậy hãy giữ ở mức cần thiết.
-
Cân nhắc ảnh hưởng hiệu suất Nếu quá nhiều lớp được tạo bởi vòng lặp, CSS của bạn có thể trở nên quá lớn không cần thiết.
-
Sử dụng tên biến phù hợp Đối với các biến như
$ihay$item, hãy sử dụng tên có ý nghĩa để mã của bạn dễ hiểu hơn.
Tóm tắt
Sử dụng lặp trong SASS giúp tạo kiểu hiệu quả và dễ bảo trì. Đặc biệt, lựa chọn giữa @for, @each và @while cho phép bạn tạo ra CSS động và linh hoạt.
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.