如何将sass映射中的多个值与混合中的each函数一起使用
提问于 2014-09-26 12:18:22
我有下面的sass map，它有多个值：
$map: (key: (value1, value2));使用如下所示的标准每个函数都可以正常工作：
@each $key, $value1, $value2 in $map {
// Do whatever here
}但是，如果我试图在传递map中的mixin的混入中使用相同类型的每个函数，则每个函数不能与下面的函数一起工作：
@mixin my-mixin($map) {
@each $key, $value1, $value2 in $map {
// Do whatever here
}
}如何在每个键有多个值的映射中使用mixin中的each函数？
你可以看到我正在尝试用下面的代码来做什么，我已经尝试做了一个混入，用一个模块化的比例输出一个属性。使用了两个模块比例，一个默认用于小屏幕(移动优先)，另一个较大的用于较大屏幕：
// Output responsive modular properties
@mixin rms-value($properties) {
@each $property-name, $property-ms, $property-ms2 in $properties {
$rem-value: ms($property-ms);
$px-value: rem-to-pixels($rem-value);
#{$property-name}: $px-value;
#{$property-name}: $rem-value;
}
// Secondary modular scale used for larger screens
@include breakpoint($breakpoint-medium) {
@each $property-name, $property-ms2 in $properties {
$rem-value: ms($property-ms2, 1rem, $ms-ratio-large);
$px-value: rem-to-pixels($rem-value);
#{$property-name}: $px-value;
#{$property-name}: $rem-value;
}
}
}然后，这可以用来输出页边距底部和填充顶部，例如：
$properties: (
padding-top: (1, 2),
margin-bottom: (2, 3),
);
p {
@include rms-value($properties);
}当我只对每个地图键使用单个值时，这种方法工作得很好
回答 1
Stack Overflow用户
发布于 2014-09-26 12:59:00
您的错误在于您试图将map变量作为参数传递。您应该尝试在您的map变量的mixin中设置，并将可能需要的键设置为参数，如下所示：
@mixin my-mixin($key) {
$map: (
key1: (red, blue),
key2: black
);
@each $key, $value in $map {
// do whatever
}
}没有函数的示例：
@mixin my-mixin($key) {
$map: (
key1: 10px,
key2: 10em
);
font-size: map-get($map, $key);
}
div {
@include my-mixin(key2);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26059415
复制相关文章
点击加载更多
腾讯云开发者
