SOLVED: Đặt biến trong vòng lặp SASS

Dĩ nhiên là Bạn đã sử dụng SASS rồi nhỉ? Bởi vì nó tiện dụng, tối ưu code, và viết ít code hơn. Oke? Tuy nhiên một vấn đề mình gặp được trong tuần này, đó là việc đặt biến trong vòng lặp SASS. Nó tốn khá khá thời gian để mày mò, và tìm hiểu. Hãy cùng xem nhé!

Vấn đề

Mình có một khối, với đoạn code như sau:

Và mình muốn nhân bản nó bằng 6 màu, với mỗi khối có một class ứng với tên màu như này:

Mình dùng vòng lặp for của SASS:

Trong đó thì biến i đã chạy từ 1 đến 6, trong đó thì class: color từ 1 đến 6 cũng chạy theo .color-#($i), vậy mình đặt màu tương ứng?

Với biến trong vòng lặp $color-#($i), và lỗi đã xảy ra !!!

Đó là lỗi Invalid $color- bởi cấu trúc của SASS không hỗ trợ cái gọi là biến trong biến như thế này?

Giải quyết

Okay, mất thêm một khoảng thời gian, cách của chúng ta dùng được đó chính là @each trong SASS.

Trong đó, mình tạo ra mảng $color-list: với 2 biến chính là tên class + mã màu tương ứng.

Dùng cấu trúc @each $value in … {} ta được vòng lặp với từng dòng trong mảng. Lấy giá trị phần tử trong mảng với {nth($value, 1)} để giá trị 1 trong một dòng, cũng như {nth($value, 2)} để lấy giá trị 2.

SOLVED: Đặt biến trong vòng lặp SASS

Okay Vậy bài toán đặt biến trong vòng lặp SASS hay biến trong biến trong SASS đã được giải quyết! Hy vọng bài viết này giải quyết được vấn đề của bạn.

Leave a Reply

avatar
  Subscribe  
Notify of
%d bloggers like this: