[英]Nested Scss @each with variables
Is it possible to create a function inside a nested variable with scss/sass? 是否可以使用scss / sass在嵌套变量内创建函数? I was using this article to help guide me but I did not find anything on whether it would work inside a nested color variable.
我使用这篇文章来帮助指导我,但是我没有发现关于它是否可以在嵌套的颜色变量中使用的任何信息。 Article working-with-lists-and-each-loops-in-sass-with-the-index-and-nth-function
文章与列表和每个循环一起工作,并具有索引和第n个功能
I want to create a function to automate the creation of these variables 我想创建一个函数来自动创建这些变量
$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");
}
I am looking to do something like this but I can't figure it out. 我想做这样的事情,但我不知道。
$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");
}
Is it even possible or is there a similar way to execute this? 甚至可能还是有类似的方法来执行此操作?
I don't think it's possible to loop inside a map
我认为不可能在
map
内循环
However this is how you can achieve what you want easily. 但是,这是您可以轻松实现所需目标的方式。 I am using the sass syntax
我正在使用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")
This is the scss syntax 这是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");
}
They both compile to the following css 它们都编译为以下CSS
h1 {
color: #af5422; }
h2 {
color: #FFCA28; }
h3 {
color: #FFA000; }
UPDATED ANSWER FOR EXTENSION 更新的扩展答案
Based on what you want to achieve in the link in your comment This is the code using sass indented style 基于您想要在注释链接中实现的目标这是使用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.