0

我正在编写一些 sass 来根据一系列参数生成一组图标。我有一个函数可以分析一组变量，然后返回一个“场景”变量，该变量又用于过滤从存储所有内容的嵌套地图中获取的信息。

从嵌套映射中检索信息的代码如下：

@each $key-lv0, $lv0 in $icon-config {

@if($key-lv0 == $scenario) {

    .icon{
        @each $key-lv1, $lv1 in $lv0 {

            @if type-of($lv1) != "map" {
                #{$key-lv1}: $lv1;
            }

            @each $key-lv2, $lv2 in $lv1 {

                @if type-of($lv2) != "map" {
                    .#{$key-lv1} {
                        #{$key-lv2}: $lv2;
                    }
                }

                @each $key-lv3, $lv3 in $lv2 {
                    @if($key-lv2 == "hover") {
                        .#{$key-lv1}:#{$key-lv2} {
                            #{$key-lv3}: $lv3;
                        }
                    } @else {
                        .#{$key-lv1} #{$key-lv2} {
                            #{$key-lv3}: $lv3;
                        }
                    }
                }
            }  
        }
    }
}
}

...这会产生以下内容：

.icon .icon-header {
  background-color: #00a9f0;
}
.icon .icon-header:hover {
  border-color: #040100;
}
... etc ...

...这很好 - 除了我稍后会处理的重复声明之外。

问题是“.icon”和“.icon-header”之间的上限。这些类都将在单个元素中使用，并且要正确解释 css，它需要生成如下内容：

.icon.icon-header {
  background-color: #00a9f0;
}
.icon.icon-header:hover {
  border-color: #040100;
}

我试过像这样把“.icon”降下来：

@if type-of($lv1) != "map" {
    .icon#{$key-lv1}: $lv1;
}

并将其从顶部删除，但 sass 拒绝此操作并出现以下错误：

错误：属性只能在规则、指令、mixin 包含或其他属性中使用。

这似乎是一件微不足道的事情，但它一直困扰着我，我似乎无法找到答案。

4

0 回答 0