Quy tắc
$base-color: #036
@for $i from 1 through 3
ul:nth-child[3n + #{$i}]
background-color: lighten[$base-color, $i * 5%]
$base-color: #036
@for $i from 1 through 3
ul:nth-child[3n + #{$i}]
background-color: lighten[$base-color, $i * 5%]
$base-color: #036
@for $i from 1 through 3
ul:nth-child[3n + #{$i}]
background-color: lighten[$base-color, $i * 5%]
$base-color: #036
@for $i from 1 through 3
ul:nth-child[3n + #{$i}]
background-color: lighten[$base-color, $i * 5%]
$base-color: #036
@for $i from 1 through 3
ul:nth-child[3n + #{$i}]
background-color: lighten[$base-color, $i * 5%]
- SCSS
- Sass
- CSS
SCSS Syntax Syntax
$base-color: #036;
@for $i from 1 through 3 {
ul:nth-child[3n + #{$i}] {
background-color: lighten[$base-color, $i * 5%];
}
}
Sass Syntax
$base-color: #036
@for $i from 1 through 3
ul:nth-child[3n + #{$i}]
background-color: lighten[$base-color, $i * 5%]
CSS Output Output
ul:nth-child[3n + 1] {
background-color: #004080;
}
ul:nth-child[3n + 2] {
background-color: #004d99;
}
ul:nth-child[3n + 3] {
background-color: #0059b3;
}
- Điều khiển và vòng lặp lặp lại là gì
- Các vòng lặp @for
- Các vòng lặp @trong khi
- Vòng lặp @each
- @for vs @while vs @each
- Tóm tắt: Những điểm cần nhớ
Điều khiển và vòng lặp lặp lại là gì
SASS cho phép chúng tôi kiểm soát luồng của các tập lệnh của chúng tôi hơn nữa bằng cách lặp qua các phần của mã, thực hiện quy trình đó trên mỗi lần lặp.
Sass cung cấp cho chúng tôi ba loại vòng khác nhau.
- @for - Vòng lặp này lặp lại thông qua một phần mã cho một số lần đã đặt. - This loop iterates through a section of code for a set number of times.
- @while - Vòng lặp này lặp lại thông qua một phần mã trong khi điều kiện là đúng. - This loop iterates through a section of code while a condition is true.
- @each - Vòng lặp này lặp lại thông qua tất cả các yếu tố trong một bộ sưu tập mà không có điều kiện. - This loop iterates through all elements in a collection without a condition.
Các vòng lặp @for
Vòng lặp For sẽ lặp lại thông qua một phần mã cho một số lần được chỉ định.for loop will iterate through a section of code for a specified number of times.
A cho vòng lặp bao gồm 3 phần.
- Biến bộ đếm để theo dõi lần lặp hiện tại.
- Số lượng để bắt đầu lặp từ.
- Số để lặp đến.
Chúng tôi bắt đầu với quy tắc @for, theo sau là biến bộ đếm. Sau đó, chúng tôi sử dụng từ khóa và số để bắt đầu lặp từ.@for rule, followed by the counter variable. Then we use the from keyword and the number to start looping from.
Cuối cùng, chúng tôi sử dụng từ khóa thông qua và chỉ định số mà chúng tôi muốn lặp, theo sau là một khối mã.through keyword and specify the number that we want to loop to, followed by a code block.
@for $counter from number through number {
// code to execute on each loop
}Biến bộ đếm không được khởi tạo với một giá trị như trong các ngôn ngữ lập trình khác, nó sẽ nhận được giá trị của nó từ số bắt đầu.
Câu lệnh có nội dung: Đối với phép lặp hiện tại từ đầu đến cuối, thực thi mãfor current iteration from beginning to end, execute code
$font-size: [24px, 22px, 20px, 18px];
@for $i from 1 through 4 {
h#{$i} {
font-size: nth[$font-size, $i];
}
}Trong ví dụ trên, chúng tôi muốn tạo 4 kiểu tiêu đề với kích thước phông chữ từ danh sách, vì vậy chúng tôi lặp lại từ 1 đến 4 với $ I là biến bộ đếm của chúng tôi.$i as our counter variable.
Trong khối mã, chúng tôi tạo một phần tử H với bộ đếm làm số tiêu đề. Chúng tôi sử dụng bộ đếm một lần nữa để lấy kích thước phông chữ ra khỏi danh sách vào tài sản.h element with the counter as the heading number. We use the counter again to get the font size out of the list into the property.
Với mỗi lần lặp, bộ đếm sẽ tăng và cả hai thêm số vào H, cũng như gán giá trị phần tử chính xác cho thuộc tính.
h2 {
font-size: 24px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
}Chúng ta cũng có thể sử dụng từ khóa trong vòng lặp nếu chúng ta muốn loại trừ lần lặp cuối cùng.to keyword in the loop if we want to exclude the last iteration.
$font-size: [24px, 22px, 20px, 18px];
@for $i from 1 to 4 {
h#{$i} {
font-size: nth[$font-size, $i];
}
}Lần này, vòng lặp sẽ chỉ chạy 3 lần vì nó sẽ loại trừ lần lặp cuối cùng.
h2 {
font-size: 24px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 20px;
}Các vòng lặp @trong khi
Vòng lặp trong khi bao gồm một khối có điều kiện. Nếu đánh giá chứng minh đúng, nó sẽ tiếp tục lặp qua một phần mã cho đến khi điều kiện chứng minh sai.while loop includes a conditional block. If the evaluation proves true it will continue looping through a section of code until the condition proves false.
Chúng tôi bắt đầu với quy tắc @while, theo sau là điều kiện để đánh giá và khối mã.@while rule, followed by the condition to evaluate and a code block.
@while condition {
// code to execute on each loop
}Câu lệnh có nội dung: Mặc dù điều kiện là đúng, nhưng thực thi mãwhile condition is true, execute code
$font-size: 16;
@while $font-size