Sử dụng SASS Variables trong nnth-child?

Question

Tôi có một mạng lưới thiết lập hình ảnh thu nhỏ, hiện có 4 ngón tay cái mỗi hàng. Để chắc chắn rằng họ xếp hàng tôi có đoạn mã này:

li:nth-child(5) { margin-left: 0;} 

Những gì tôi đã cố gắng để làm được điều này nhưng tôi nhận được một lỗi cú pháp:

$galleryGrid: 5; 
    li:nth-child($galleryGrid) { margin-left: 0;} 

Nếu tôi muốn thay đổi thứ n -child để sử dụng một giá trị khác, chẳng hạn như 10 (vì vậy tôi có thể có 8 ngón tay cái trong một hàng), tôi cho rằng điều này sẽ hoạt động. Điều này là không thể hoặc tôi chỉ làm sai?

Cảm ơn bạn đã trợ giúp.

Answer 1

Bạn cần sử dụng phép nội suy biến để cho phép con thứ n là biến.

$galleryGrid: 5; 
li:nth-child(#{$galleryGrid}) { margin-left: 0;} 

Tạo

li:nth-child(5){margin-left:0} 

đánh dấu này là tốt nếu bạn có quyền kiểm soát tuyệt đối so với hình ảnh và bố trí để đảm bảo rằng các yếu tố của bạn luôn luôn quấn theo cách như vậy mà mỗi người 5 bắt đầu một dòng mới. Nếu bạn không thể đảm bảo như vậy, việc đặt lề trái trên phần tử gốc là cách tốt hơn.