Пробелы в выводе sass css - PullRequest
Новая
       31

Пробелы в выводе sass css

0 голосов
/ 07 сентября 2018

Я пишу 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 отклоняет это со следующей ошибкой:

Ошибка: свойства разрешены только в рамках правил, директив, включений в миксин или других свойств.

Это кажется такой незначительной вещью, но это не дает мне покоя, и я не могу найти ответ.

...