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.

html css

— jcolebrand
quelle

<strike> Nur eine Notiz, die nicht die gleichen Stile wie der Rand erzeugt, befindet sich jetzt auf den imgElementen innerhalb der .imgKlasse. </ strike>

— Josh K

@JoshK ~ Warum ist das so? Vielleicht wird mein tatsächliches erneutes Lesen des LessCSS-Materials mein Gedächtnis auffrischen, aber Sie scheinen schneller als Google zu sein;)

— jcolebrand

Oh, ich habe den Abschluss verpasst }. Ich werde die jetzt aufräumen.

— Josh K

Ja, ich habe sie inline gelassen, weil die vorherigen inline waren. Ich wusste nicht, ob die Reihenfolge für den CSS-Stil von Bedeutung ist, den ich gesehen hatte, und nachdem ich Ihren WENIGER-Block unten gesehen hatte, dachte ich, ich sollte sie umdrehen, ließ ihn aber für die Nachwelt Sake;) ~ aber mir macht die Bearbeitung nichts aus, ich habe diese Rep-Power auf SO: D

— jcolebrand

Antworten:

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

— Josh K.
quelle

egads du bist schnell;)

— jcolebrand

Wir LIEBEN dotless.

— Quentin-Starin

Auch: sass-lang.com

— Juan Mendes

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 ...

— Mladen Jablanović
quelle