[英]Nested Scss @each with variables
是否可以使用scss / sass在嵌套变量内创建函数? 我使用这篇文章来帮助指导我,但是我没有发现关于它是否可以在嵌套的颜色变量中使用的任何信息。 文章与列表和每个循环一起工作,并具有索引和第n个功能
我想创建一个函数来自动创建这些变量
$oranges: #af5422;
$oranges2: #FFCA28;
$oranges3: #FFA000;
$fish: (
orange: (
"goldfish-1": $oranges,
"goldfish-2": $oranges2,
"goldfish-3": $oranges3,
)
) !default;
h1 {
color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
color: map-get(map-get($fish, orange), "goldfish-3");
}
我想做这样的事情,但我不知道。
$oranges: #af5422 #FFCA28 #FFA000;
$fish: (
orange:
@each $current-color in $oranges {
$i: index($oranges, $current-color);
"goldfish-#{$i}": $current-color,
}
)
) !default;
h1 {
color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
color: map-get(map-get($fish, orange), "goldfish-3");
}
甚至可能还是有类似的方法来执行此操作?
我认为不可能在map
内循环
但是,这是您可以轻松实现所需目标的方式。 我正在使用sass语法
$oranges: #af5422 #FFCA28 #FFA000
$orange: ()
@each $current-colour in $oranges
$i: index($oranges, $current-colour)
$orange: map-merge($orange, ("goldfish-#{$i}": $current-colour))
$fish: (orange: $orange) !default
h1
color: map-get(map-get($fish, orange), "goldfish-1")
h2
color: map-get(map-get($fish, orange), "goldfish-2")
h3
color: map-get(map-get($fish, orange), "goldfish-3")
这是scss语法
$oranges: #af5422 #FFCA28 #FFA000;
$orange: ();
@each $current-colour in $oranges {
$i: index($oranges, $current-colour);
$orange: map-merge($orange, ("goldfish-#{$i}": $current-colour));
}
$fish: (orange: $orange) !default;
h1 {
color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
color: map-get(map-get($fish, orange), "goldfish-3");
}
它们都编译为以下CSS
h1 {
color: #af5422; }
h2 {
color: #FFCA28; }
h3 {
color: #FFA000; }
更新的扩展答案
基于您想要在注释链接中实现的目标这是使用sass缩进样式的代码
$oranges: #af5422 #FFCA28 #FFA000
$newvar: car plane truck
$shaded: 5% 15%
$orange: ()
$vehicle: ()
@each $current-colour in $oranges
$i: index($oranges, $current-colour)
$orange: map-merge($orange, ($i*100:$current-colour))
$fish: ( orange: $orange) !default
@each $automobile in $newvar
$i: index($newvar, $automobile)
@for $count from 1 through 5
$new_map: ()
@if $count == 1
$new_map: map-merge($new_map, ($count *100: lighten(nth($oranges, $i), nth($shaded, 2))))
@else if $count == 2
$new_map: map-merge($new_map, ($count *100: lighten(nth($oranges, $i), nth($shaded, 1))))
@else if $count == 3
$new_map: map-merge($new_map, ($count *100: nth($oranges, $i)))
@else
$new_map: map-merge($new_map, ($count *100: darken(nth($oranges, $i), nth($shaded, 1))))
$vehicle: map-merge($vehicle, $new-map)
$fish: map-merge($fish, ($automobile: $vehicle))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.