相关阵列SCSS/SASS
相关阵列SCSS/SASS
提问于 2014-01-25 00:23:24
我需要把数字转换成文字，所以：
- "1-3“->”三分之一“
- "3-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中是否完全可以创建关联数组，或者有什么解决办法？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-25 08:15:34
在Sass < 3.3中，可以使用多维列表：
$numbers: (3 "three") (4 "four");
@each $i in $numbers {
.#{nth($i,2)}-#{nth($i,1)} {
/* CSS styles */
}
}演示
在Sass >= 3.3中，我们得到了地图：
$numbers: ("3": "three", "4": "four");
@each $number, $i in $numbers {
.#{$i}-#{$number} {
/* CSS styles */
}
}演示
所以就分数而言，你可以在这个方向上做一些事情，这样你就不需要多个列表或地图了：
$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 */
}
}
}演示
(我是这样写的，所以您可以在@for中注意到，使用to会转到n - 1)
Stack Overflow用户
发布于 2018-09-24 15:34:28
除了Martin的答案之外，我的示例还使用颜色作为变量，它也适用于像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; }
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21344891
复制相关文章
相似问题
腾讯云开发者
