scss array

Solutions on MaxInterview for scss array by the best coders in the world

showing results for - "scss array"
Giulia
20 Jan 2018
1In Sass < 3.3 you can use multidimensional lists:
2
3$numbers: (3 "three") (4 "four");
4
5@each $i in $numbers {
6    .#{nth($i,2)}-#{nth($i,1)} {
7        /* CSS styles */
8    }
9}
10DEMO
11
12In Sass >= 3.3 we get maps:
13
14$numbers: ("3": "three", "4": "four");
15
16@each $number, $i in $numbers {
17    .#{$i}-#{$number} {
18        /* CSS styles */
19    }
20}
21DEMO
22
23So in terms of fractions, you could just do something in this direction, so that you don't need multiple lists or maps:
24
25$number: 6;
26$name: (
27    ("one"),
28    ("two" "halv" "halves"),
29    ("three" "third" "thirds"),
30    ("four" "quarter" "quarters"),
31    ("five" "fifth" "fifths"),
32    ("six" "sixth" "sixsths")
33);
34and then whatever you want to do with your loops ... maybe even something like this =D
35
36@for $i from 1 to $number {
37  @for $j from 2 through $number {
38    .#{ nth( nth( $name, $i ), 1 ) }-#{
39      if( $i>1,
40        nth( nth( $name, $j ), 3 ),
41        nth( nth( $name, $j ), 2 )
42      )} {
43        /* CSS styles */
44    }
45  }
46}
47DEMO
48
49(I wrote it this way so that you can notice in @for, that using to goes to n - 1)