WENIGER - Schleifen

In diesem Kapitel werden wir verstehen, wie Schleifen in WENIGER funktionieren. Mit der Loops-Anweisung können wir eine Anweisung oder eine Gruppe von Anweisungen mehrmals ausführen. Beim Kombinieren von rekursivem Mixin mit können verschiedene iterative / Schleifenstrukturen erstellt werdenGuard Expressions und Pattern Matching.

Beispiel

Das folgende Beispiel zeigt die Verwendung von Schleifen in der LESS-Datei -

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

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

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

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

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

Ausgabe

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

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