WENIGER - Verschachtelte Direktiven und Blasenbildung

Beschreibung

Sie können die Anweisungen wie Medien und Keyframe auf dieselbe Weise verschachteln, wie Sie die Selektoren verschachteln. Sie können die Direktive oben platzieren und ihre relativen Elemente werden innerhalb ihres Regelsatzes nicht geändert. Dies ist als Blasenbildungsprozess bekannt.

Beispiel

Das folgende Beispiel zeigt die Verwendung der verschachtelten Anweisungen und das Sprudeln in der WENIGER-Datei.

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Erstellen Sie als Nächstes die Datei style.less .

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

Sie können die Datei style.less mit dem folgenden Befehl in style.css kompilieren :

lessc style.less style.css

Führen Sie den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code -

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

Ausgabe

Befolgen Sie diese Schritte, um zu sehen, wie der obige Code funktioniert -

Speichern Sie den obigen HTML-Code in der nested_directives_bubbling.html Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.