关联数组 SCSS/SASS [英] Associative Array SCSS/SASS

问题描述

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

• 1-3" -> 三分之一"
• 3-3" -> 三分之二"
• 2-5" -> 五分之二"

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

$number = 3;@for $i 从 1 到 $number-1 {//输出这些类的一些计算:.one-third"，.two-thirds"//以下当前输出类名，如.1-3"和.2-3".#{$i}-#{$number} {//CSS 样式}}

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

$1 = 数组(1"=>一"，2"=>两个"，3"=>三");$2 = 数组(1"=>整体"，2"=>一半"，3"=>第三个");

是否可以在 SASS/SCSS 中创建关联数组或是否有任何解决方法?

解决方案

In Sass

3.3 可以使用多维列表:

$numbers: (3"三") (4"四");@每个 $i 在 $numbers {.#{nth($i,2)}-#{nth($i,1)} {/* CSS 样式 */}}

演示

在 Sass >= 3.3 中我们得到地图:

$numbers: ("3": "三", "4": "四");@each $number, $i in $numbers {.#{$i}-#{$number} {/* CSS 样式 */}}

演示

<小时>

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

$number: 6;$姓名:((一")，(两个"一半"一半")，(三"三"三")，(四"季度"季度")，(五"五"五")，(六"六"六"));

然后无论你想用循环做什么......甚至可能是这样的 =D

@for $i 从 1 到 $number {@for $j 从 2 到 $number {.#{ nth( nth( $name, $i ), 1 ) }-#{如果($i>1，第 n( nth( $name, $j ), 3 ),第n(nth($name,$j),2))} {/* CSS 样式 */}}}

演示

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

I need to convert numbers into words, so:

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

The numbers are generated in a loop, which should output a bunch of different class names like one-third or 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
    }
}

I think I need to use two different associative arrays, which in PHP (just as an example) might look like:

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

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

Is it possible in SASS/SCSS to create associative arrays at all or is there any workaround?

解决方案

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)

这篇关于关联数组 SCSS/SASS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！