Associative Array SCSS/SASS

Question

I need to convert numbers into words, so:

• \"1-3\" -> \"one-third\"
• \"3-3\" -> \"three-thirds\"
• \"2-5\" -> \"two-fifths\"

The

Answer 1

in addition to answer by Martin, my example for using colors as variables, that also works with color-processing functions like darken():

$blue: rgb(50, 57, 178);
$green: rgb(209, 229, 100);
$orange: rgb(255, 189, 29);
$purple: rgb(144, 19, 254);

$colors: (
        "blue": $blue,
        "green": $green,
        "orange": $orange,
        "purple": $purple
);

@each $name, $color in $colors {
  .tc-#{$name} { color: #{$color} !important; }
  .bgc-#{$name} { background-color: #{$color} !important; }
}

Answer 2

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)