css - Use SASS @each variable inside nested mixin
问题描述
I want to use Sass's built-in @each method to shorten this code:
.svg-circle-full {
@include mixinSVG((
'svg': $svgvar-icn-circle-full,
'isWide': false
)...);
}
.svg-circle-empty {
@include mixinSVG((
'svg': $svgvar-icn-circle-empty,
'isWide': false
)...);
}
.svg-circle-half {
@include mixinSVG((
'svg': $svgvar-icn-circle-half,
'isWide': false
)...);
}
Basically I need to be able to use the variable name from my @each loop inside of the mixinSVG mixin. I am trying this but it is failing when it hits the @each variable inside the 'svg' property:
@each $state in full, empty, half {
.svg-circle-#{$state} {
@include mixinSVG((
'svg': $svgvar-icn-circle-#{$state},
'isWide': false
)...);
}
}
解决方案
您正在弄乱命名参数。
它应该是这样的:
@each $state in triangle, square, circle {
.svg-circle-#{$state} {
@include mixinSVG(
$svg: svgvar-icn-circle-#{$state},
$isWide: false
);
}
}
来源:http ://blog.ricardofilipe.com/post/object-arguments-in-sass
推荐阅读
- jolt - 在 Jolt 中将多个字符串列表转换为不同的对象
- node.js - Slackbot 在交互式会话中保持上下文(NodeJS)
- spring - spring-data-rest-webmvc:3.4.x 是否与 Spring Boot 2.3.x 兼容?
- python - 从python中文本文件的某些行中查找平均值
- python - 将具有不同键顺序的多个 json 文件插入到 postgres 表中
- c++ - V8 c++:如何通过代码将模块导入脚本上下文
- reactjs - 无法读取属性 Symbol(Symbol.iterator)
- flutter - 颤振:返回值为 NULL
- c# - 在没有递归函数的 C# 中计算组合
- python - 为什么我在使用 python 写入文件时会出错?