0

I'm writing some sass to generate a set of icons based on a series of parameters. I have a function that analyses a set of variables and then returns a 'scenario' variable which in turn is used to filter the information taken from the nested map where everything is stored.

The code which retreives the information from the nested map is as follows:

@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;
                        }
                    }
                }
            }  
        }
    }
}
}

... and this produces something along these lines:

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

... which is fine - repeated statements aside whicvh I'll deal with later.

The problem is the cap between ".icon" and ".icon-header". These classes will all be used in a single element and for the css to be interpretted correctly it needs to generate something like this:

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

I've tried bringing ".icon" down like so:

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

and removing it from the top but sass rejects this with the following error:

Error: Properties are only allowed within rules, directives, mixin includes, or other properties.

It seems such a minor thing but it's nagging me and I can't seem to find an answer.

Bahman Parsa Manesh
  • 2,314
  • 3
  • 16
  • 32
Stef
  • 359
  • 1
  • 4
  • 21
  • 1
    While I really do genuinely appreciate people reading through my question and taking time out of their lives to change very, very minor grammatical errors, it would be far more useful if they made pertinent suggestions regarding the question. – Stef Sep 07 '18 at 20:11
  • It is because edits receive reputation. In my experience, that actually leads to more people reading the question and hence, you receiving a faster answer. – saketk21 Sep 07 '18 at 20:14
  • 1
    Thanks - it's still annoying though :-) – Stef Sep 07 '18 at 20:17
  • See Referencing Parent Selectors: & in http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_rules –  Sep 09 '18 at 19:51
  • Fantastic - just what I needed - thanks ;-) Please feel free to put as an answer and I'll accept. – Stef Sep 10 '18 at 10:04

0 Answers0