Hướng dẫn what is @each in scss? - @each trong scss là gì?
|
SASS cung cấp các quy tắc như Show
Như đã rõ ràng theo tiêu đề của hướng dẫn, có 3 quy tắc trong SASS có thể được sử dụng để thiết lập tạo ra quy tắc kiểu lặp đi lặp lại:
Chúng ta hãy bao gồm từng người một, bao gồm cú pháp cho họ cùng với một số ví dụ. SASSSassy way Sassy way Sassy way Sassy way Sassy way 3 AT-RULE:SASS SassSassy way Sassy way Sassy way Sassy way Sassy way 3: Cú phápSau đây là cú pháp sử dụng quy tắc Như bạn có thể thấy trong cú pháp ở trên, có hai cách sử dụng @For AT-Rule trong SCSS/SASS:
SASSSassy way Sassy way Sassy way Sassy way Sassy way 3: Ví dụChúng ta hãy lấy một ví dụ đơn giản để hiểu cách sử dụng điều này. Dưới đây chúng tôi có mã HTML đơn giản với một số thẻ đoạn văn. Bây giờ nếu có nhu cầu viết một số kiểu dáng cho các lớp gần như giống nhau được sử dụng trong các thẻ đoạn văn, thì nên viết tổng cộng 5 khối kiểu.a total of 5 blocks of styles should be written. Trong trường hợp này, nếu vòng lặp được sử dụng thì nhiệm vụ này đòi hỏi ít nỗ lực hơn. Ngoài ra, trong các quy tắc kiểu, chúng ta cần tăng kích thước phông chữ của mỗi đoạn bằng cách nhân 10px với số đoạn.for loop is used then this task requires fewer efforts. Also, in the style rules, we need to increase the font size of each paragraph by multiplying 10px with the paragraph number. Kiểm tra mã SCSS sau:SCSS code: Ví dụ trên sử dụng phương thức bắt đầu đến kết thúc để biến Các CSS được tạo từ mã SCSS trên sẽ trông giống như:CSS from the above SCSS code will look like: SASSSassy way Sassy way Sassy way Sassy way Sassy way 4 AT-RULE:SCSS/SASS SassSassy way Sassy way Sassy way Sassy way Sassy way 4: Cú phápSau đây là cú pháp sử dụng Biểu thức trả về một danh sách và khối kiểu được đánh giá cho từng phần tử của danh sách, là từng cái một được gán cho tên biến đã cho. SASSSassy way Sassy way Sassy way Sassy way Sassy way 4: Ví dụHãy hiểu điều này với sự trợ giúp của một ví dụ. Hãy xem xét ba phần tử div trong đó màu nền cho mỗi div cần được đặt với sự trợ giúp của Đầu tiên, hãy để Lừa làm điều này bằng cách sử dụng danh sách:using a list: Cách bản đồ khác một chút so với danh sách, nó như sau: Các CS được biên dịch cho cả hai trường hợp sẽ trông giống như:CSS for both the cases will look like: SASSSassy way Sassy way Sassy way Sassy way Sassy way 5 AT-RULE:SASS SassSassy way Sassy way Sassy way Sassy way Sassy way 5: Cú phápSau đây là cú pháp cho Khối kiểu được xác định với quy tắc SASSSassy way Sassy way Sassy way Sassy way Sassy way 5: Ví dụHãy cùng xem xét cùng một ví dụ được sử dụng trong Bây giờ kích thước phông chữ của mỗi đoạn cần phải được tăng lên đối với số đoạn của nó. Điều này có thể được thực hiện bằng cách sử dụng @while và nó được hiển thị bên dưới:@while and it is shown below: Các CSS được tạo sẽ trông như thế này:CSS will look like this: Vì vậy, trong hướng dẫn này, chúng tôi đã học 3 kỹ thuật lặp khác nhau trong SASS/SCSS để tạo ra các quy tắc phong cách lặp đi lặp lại. Bạn có thể sử dụng những điều này trong trường hợp bạn có tình huống mà bạn phải xác định các lớp kiểu gần như tương tự với một số thay đổi về kiểu như H2, H2, H3, v.v. 2, Col-3, v.v. Có nhiều trường hợp sử dụng trong đó những trường hợp này có thể được sử dụng.h2, h2, h3, etc. tags or in case of bootstrap CSS we have columns col-1, col-2, col-3, etc. There are many use-cases where these can be used. Chúng ta có thể sử dụng cho vòng lặp trong SCSS không?SASS có một số tùy chọn vòng lặp, giống như các ngôn ngữ lập trình khác. Chúng bao gồm vòng lặp @for, @each Loop và @WHILE LOOP. Các vòng lặp này là một công cụ cực kỳ mạnh mẽ để tạo mã CSS vì bạn có thể trì hoãn việc tạo mã thành một nhiệm vụ có thể lặp lại.@for loop, @each loop and @while loop. These loops are an incredibly powerful tool for generating CSS code because you can defer code generation into an iterable task.
Nội suy biến trong SASS là gì?Nội suy cho phép chúng tôi nội suy các biểu thức SASS thành mã SASS hoặc CSS đơn giản.Có nghĩa là, bạn có thể xác định (một số phần hoặc toàn bộ) tên chọn, tên thuộc tính, CSS AT-RULES, các chuỗi được trích dẫn hoặc chưa được trích xuất, v.v., như một biến.Nội suy là một nguyên tắc mới và nó được sử dụng rộng rãi trong SASS.allows us to interpolate sass expressions into a simple SASS or CSS code. Means, you can define ( some part or the whole ) selector name, property name, CSS at-rules, quoted or unquoted strings etc, as a variable. Interpolation is a new principle and it is widely used in SASS.
Những gì cho các vòng được sử dụng cho trong sass?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.@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.@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.iterates through a section of code for a set number of times. @while - This loop iterates through a section of code while a condition is true. @each - This loop iterates through all elements in a collection without a condition.
Sassscript là gì?SASSScript là một tập lệnh cho phép chúng tôi tính toán bộ chọn, thuộc tính hoặc giá trị CSS bằng cách sử dụng biểu thức SASS.Chúng tôi sẽ xem xét các biểu thức trong chương này và khám phá các kiểu dữ liệu, chỉ thị kiểm soát SASSScript, hoạt động và chức năng trong một vài chương tiếp theo.Tất cả những thứ này có thể được sử dụng trong SASSScript.a script which allows us to compute CSS selector, property or value using Sass expression. We'll look at expressions in this chapter and explore data types, SassScript control directives, operations and functions in the next few chapters. All of these can be use in SassScript. |
