Verschachtelte CSS-Stile ~ Wo habe ich dieses Konzept schon gesehen?

Ich kann das jetzt nicht finden, aber ich habe es bereits in verschiedenen Blogs gelesen, in denen das Thema diskutiert wurde. Ich werde ein Beispiel geben und hoffentlich ist es klar (obwohl es möglicherweise überhaupt nichts klarstellt).

Angesichts dieses Aufschlags (absichtlich willkürlich):

<div class="myWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>
<div class="yourWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>

Während das CSS so lesen könnte:

.myWrapper .img img {border: thin black solid;}
.myWrapper .img {margin:10px;}
.yourWrapper .img img {border: thick red dashed;}
.yourWrapper .img {margin:20px;}

Es könnte auch so geschrieben werden:

.myWrapper {
  .img { 
    margin:10px;
    img {
        border: thin black solid;
    }
  }
}
.yourWrapper {
  .img { 
    margin:10px;
    img {
        border: thick red dashed;
    }
  }
}

Aber ich kann mich nicht erinnern, gesehen zu haben, wo darüber gesprochen wurde oder ob etwas in Arbeit ist. Weiß jemand, wovon zum Teufel ich rede?

Und ich denke nicht, dass dies eine SO-Frage ist, oder ich hätte sie auf SO gestellt.

WENIGER CSS

dynamische Stylesheet-Sprache von Alexis Sellier. Es wird von Sass beeinflusst und hat die neuere "SCSS" -Syntax von Sass beeinflusst, die seine CSS-ähnliche Blockformatierungssyntax angepasst hat. WENIGER ist Open Source. Die erste Version wurde in Ruby geschrieben. In späteren Versionen wurde die Verwendung von Ruby jedoch veraltet und durch JavaScript ersetzt. Die eingerückte Syntax von LESS ist eine verschachtelte Metasprache , da gültiges CSS gültiger WENIGER Code mit derselben Semantik ist. WENIGER bietet die folgenden Mechanismen: Variablen, Verschachtelung, Mixins, Operatoren und Funktionen; Der Hauptunterschied zwischen LESS und anderen CSS-Precompilern besteht darin, dass LESS eine Echtzeitkompilierung über LESS.js durch den Browser ermöglicht.] LESS kann auf Client- und Serverseite ausgeführt oder in einfaches CSS kompiliert werden ...

WENIGER verwendet diese verschachtelten Stile.

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

Außerdem unterstützen sass und scss das Verschachteln.

Sass ist eine Erweiterung von CSS3 und fügt verschachtelte Regeln, Variablen, Mixins, Selektorvererbung und mehr hinzu. Es wird mit dem Befehlszeilentool oder einem Webframework-Plugin in gut formatiertes Standard-CSS übersetzt.

Sass hat zwei Syntaxen. Die am häufigsten verwendete Syntax ist als "SCSS" (für "Sassy CSS") bekannt und ist eine Obermenge der CSS3-Syntax. Dies bedeutet, dass jedes gültige CSS3-Stylesheet auch ein gültiges SCSS ist. SCSS-Dateien verwenden die Erweiterung .scss.

Die zweite, ältere Syntax wird als eingerückte Syntax (oder einfach als ".sass") bezeichnet. Inspiriert von Hamls Knappheit ist es für Leute gedacht, die Prägnanz gegenüber Ähnlichkeit mit CSS bevorzugen. Anstelle von Klammern und Semikolons wird der Einzug von Zeilen verwendet, um Blöcke anzugeben ...