How can I dinamically change the nth-child() property in SASS? - css

Question

Good evening,
I'm currently working on a designing project and looking to get something like this : Menu
To do so I used this code in SASS :
&:nth-child(1){
left: 10px;
}
&:nth-child(2){
left: 15px;
}
&:nth-child(3){
left: 30px;
}
&:nth-child(4){
left: 35px;
}
&:nth-child(5){
left: 50px;
}
&:nth-child(6){
left: 55px;
}
&:nth-child(7){
left: 70px;
}
&:nth-child(8){
left: 75px;
}
&:nth-child(9){
left: 50px;
}
&:nth-child(10){
left: 55px;
}
&:nth-child(11){
left: 30px;
}
&:nth-child(12){
left: 35px;
}
&:nth-child(13){
left: 10px;
}
&:nth-child(14){
left: 15px;
}
Right now, it is hard-coded, and the layout is not the same if the numbers of elements from the list is different.
So I'd like to do this dynamically, how can I do so?
I thank you in advance for your help,
Alex

Answer 1

Few exemple that might help you going:
How to create a simple loop with pattern
#for $i from 1 through 20 {
li:nth-child(#{$i}) {
left: 25px + $i * 10px; // could be anything, you need to find the pattern
}
}
Compiles to:
li:nth-child(1) {
left: 35px;
}
li:nth-child(2) {
left: 45px;
}
li:nth-child(3) {
left: 55px;
}
li:nth-child(4) {
left: 65px;
}
li:nth-child(5) {
left: 75px;
}
li:nth-child(6) {
left: 85px;
}
li:nth-child(7) {
left: 95px;
}
li:nth-child(8) {
left: 105px;
}
li:nth-child(9) {
left: 115px;
}
li:nth-child(10) {
left: 125px;
}
li:nth-child(11) {
left: 135px;
}
li:nth-child(12) {
left: 145px;
}
li:nth-child(13) {
left: 155px;
}
li:nth-child(14) {
left: 165px;
}
li:nth-child(15) {
left: 175px;
}
li:nth-child(16) {
left: 185px;
}
li:nth-child(17) {
left: 195px;
}
li:nth-child(18) {
left: 205px;
}
li:nth-child(19) {
left: 215px;
}
li:nth-child(20) {
left: 225px;
}
How to create a loop whith a more complex pattern
#for $i from 1 through 20 {
#if ($i < 11) {
li:nth-child(#{$i}) {
left: 25px + $i * 10px; // could be anything
}
}
#else {
li:nth-child(#{$i}) {
left: (25px + (10 * 10px)) - ((11 - $i) * -1) * 10px; // could be anything
}
}
}
Compiles to:
li:nth-child(1) {
left: 35px;
}
li:nth-child(2) {
left: 45px;
}
li:nth-child(3) {
left: 55px;
}
li:nth-child(4) {
left: 65px;
}
li:nth-child(5) {
left: 75px;
}
li:nth-child(6) {
left: 85px;
}
li:nth-child(7) {
left: 95px;
}
li:nth-child(8) {
left: 105px;
}
li:nth-child(9) {
left: 115px;
}
li:nth-child(10) {
left: 125px;
}
li:nth-child(11) {
left: 125px;
}
li:nth-child(12) {
left: 115px;
}
li:nth-child(13) {
left: 105px;
}
li:nth-child(14) {
left: 95px;
}
li:nth-child(15) {
left: 85px;
}
li:nth-child(16) {
left: 75px;
}
li:nth-child(17) {
left: 65px;
}
li:nth-child(18) {
left: 55px;
}
li:nth-child(19) {
left: 45px;
}
li:nth-child(20) {
left: 35px;
}
How to create a loop from a list of values
$fooList : 10px, 20px, 30px, 0px, 200px, 80px, -10px;
#for $i from 1 through length($fooList) {
li:nth-child(#{$i}) {
left: nth($fooList, $i);
}
}
Compiles to:
li:nth-child(1) {
left: 10px;
}
li:nth-child(2) {
left: 20px;
}
li:nth-child(3) {
left: 30px;
}
li:nth-child(4) {
left: 0px;
}
li:nth-child(5) {
left: 200px;
}
li:nth-child(6) {
left: 80px;
}
li:nth-child(7) {
left: -10px;
}