遍历嵌套的 SASS 个映射以创建 类
Loop through nested SASS Maps to create classes
我尝试遍历嵌套的 sass 映射来创建按钮 类。这可能吗?
我的地图是这样嵌套的:
$buttons: (
primary: (
border: 1px solid #ccc,
border-hover: 1px solid #ccc,
color: red,
color-hover: blue
),
secondary: (
border: 1px solid #ccc,
border-hover: 1px solid #ccc,
color: red,
color-hover: blue
)
);
当我尝试用 each 循环遍历它时,我只得到了地图的第一层。
我想要实现的是,所有必要的 类 都是用各自的值创建的。这是一个例子:
.button {
&.primary {
border: [border];
color: [color];
&:hover {
border: [border-hover];
color: [color-hover];
}
}
&.secondary {
border: [border];
color: [color];
&:hover {
border: [border-hover];
color: [color-hover];
}
}
}
我很高兴收到每一个有用的提示:)
它实际上非常简单明了。您需要做的就是使用 @each
loop over your map and extract values using map functions.
.button {
@each $type, $styles in $buttons {
&.#{$type} {
border: map-get($styles, border);
color: map-get($styles, color);
&:hover {
border: map-get($styles, border-hover);
color: map-get($styles, color-hover);
}
}
}
}
我尝试遍历嵌套的 sass 映射来创建按钮 类。这可能吗?
我的地图是这样嵌套的:
$buttons: (
primary: (
border: 1px solid #ccc,
border-hover: 1px solid #ccc,
color: red,
color-hover: blue
),
secondary: (
border: 1px solid #ccc,
border-hover: 1px solid #ccc,
color: red,
color-hover: blue
)
);
当我尝试用 each 循环遍历它时,我只得到了地图的第一层。
我想要实现的是,所有必要的 类 都是用各自的值创建的。这是一个例子:
.button {
&.primary {
border: [border];
color: [color];
&:hover {
border: [border-hover];
color: [color-hover];
}
}
&.secondary {
border: [border];
color: [color];
&:hover {
border: [border-hover];
color: [color-hover];
}
}
}
我很高兴收到每一个有用的提示:)
它实际上非常简单明了。您需要做的就是使用 @each
loop over your map and extract values using map functions.
.button {
@each $type, $styles in $buttons {
&.#{$type} {
border: map-get($styles, border);
color: map-get($styles, color);
&:hover {
border: map-get($styles, border-hover);
color: map-get($styles, color-hover);
}
}
}
}