SCSS: Level 1 Selector Script

Es gibt in SASS/SCSS keine Möglichkeit eine Referenz aus einem Unterknoten auf den Einstiegsknoten zu setzen. Lediglich eine Referenz außerhalb und eine Referenz auf sich selbst sind möglich.

Möchte man folgendes bewerkstelligen

.mod_article {
    .ce_text {
        // Wunsch: Selector, der .irgendwas.mod_article .ce_text erzeugt
    }
}

hat man mit den Bordmitteln ein Problem.

Folgendes Mixin umgeht diesen Umstand:

@mixin at-level-1($selectors) {
    $list: selector_parse($selectors);
    @at-root {
        @each $selector in $list {
            #{$selector}#{&} {
                @content;
            }
        }
    }
}

In

$selectors

werden ein oder mehrere durch Komma getrennte Selektoren angegeben. Es ist auch möglich übergeordnete Selektoren mit zu übergeben, indem man der einfachen CSS Syntax folgt.

Aus z.B.:

.mod_article {
    .ce_text {
        @include at-level-1('#main .first, #header .last, .dark') {
            background: grey;
        }
    }
}

folgt demnach

#main .first.mod_article .ce_text {
  background: grey; }
 
#header .last.mod_article .ce_text {
  background: grey; }
 
.dark.mod_article .ce_text {
  background: grey; }