arrays - 关联数组 SCSS/SASS

Question

我需要将数字转换为单词，所以:

“1-3”->“三分之一”

“3-3”->“三分之三”

“2-5”->“五分之二”

这些数字是在循环中生成的，它应该输出一堆不同的类名，如 one-third或 one-half :

$number = 3;

@for $i from 1 through $number-1 {
    // some calculations to output those classes: ".one-third", ".two-thirds"

    // The following currently outputs class names like ".1-3" and ".2-3"
    .#{$i}-#{$number} {
        // CSS styles
    }
}

我想我需要使用两个不同的关联数组，在 PHP 中(仅作为示例)可能如下所示:

$1 = array( 
   "1"=>"one", 
   "2"=>"two", 
   "3"=>"three" 
);

$2 = array( 
   "1"=>"whole", 
   "2"=>"half", 
   "3"=>"third" 
);

是否可以在 SASS / SCSS 完全创建关联数组还是有任何解决方法？

Answer 1

在 Sass < 3.3 中，您可以使用多维列表:

$numbers: (3 "three") (4 "four");

@each $i in $numbers {
    .#{nth($i,2)}-#{nth($i,1)} {
        /* CSS styles */
    }
}

DEMO

在 Sass >= 3.3 中，我们得到 map :

$numbers: ("3": "three", "4": "four");

@each $number, $i in $numbers {
    .#{$i}-#{$number} {
        /* CSS styles */
    }
}

DEMO

所以就分数而言，你可以在这个方向上做一些事情，这样你就不需要多个列表或 map :

$number: 6;
$name: (
    ("one"),
    ("two" "halv" "halves"),
    ("three" "third" "thirds"),
    ("four" "quarter" "quarters"),
    ("five" "fifth" "fifths"),
    ("six" "sixth" "sixsths")
);

然后无论你想用你的循环做什么......甚至可能是这样的=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

(我这样写是为了让您可以在 @for 中注意到，使用 to 会转到 n - 1 )