sass each index
$i: 0;
@each $food in $top-foods {
$i: $i + 1;
&:nth-child(#{$i}){
display: block;
}
}
sass each index
$i: 0;
@each $food in $top-foods {
$i: $i + 1;
&:nth-child(#{$i}){
display: block;
}
}
scss array
In Sass < 3.3 you can use multidimensional lists:
$numbers: (3 "three") (4 "four");
@each $i in $numbers {
.#{nth($i,2)}-#{nth($i,1)} {
/* CSS styles */
}
}
DEMO
In Sass >= 3.3 we get maps:
$numbers: ("3": "three", "4": "four");
@each $number, $i in $numbers {
.#{$i}-#{$number} {
/* CSS styles */
}
}
DEMO
So in terms of fractions, you could just do something in this direction, so that you don't need multiple lists or maps:
$number: 6;
$name: (
("one"),
("two" "halv" "halves"),
("three" "third" "thirds"),
("four" "quarter" "quarters"),
("five" "fifth" "fifths"),
("six" "sixth" "sixsths")
);
and then whatever you want to do with your loops ... maybe even something like this =D
@for $i from 1 to $number {
@for $j from 2 through $number {
.#{ nth( nth( $name, $i ), 1 ) }-#{
if( $i>1,
nth( nth( $name, $j ), 3 ),
nth( nth( $name, $j ), 2 )
)} {
/* CSS styles */
}
}
}
DEMO
(I wrote it this way so that you can notice in @for, that using to goes to n - 1)
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us