Dynamische Spalte basierend auf Klassennamen in weniger

Question

Ich versuche, so etwas wie dieses

  .col-@{index} { 
       width: @col-n-width; 
       left: {index - 1 } * @col-n-width; 
      } 

aber nicht sicher, zu tun, wie die für den Zugriff auf {index} Variable innerhalb. Ist das überhaupt möglich?

Answer 1

Die Syntax @{} wird nur verwendet, wenn Sie Variablen in Eigenschaftsnamen oder Selektoren oder URLs usw. interpolieren müssen. Sie ist nicht erforderlich, wenn Sie nur einfache mathematische Operationen ausführen müssen. Beziehe es einfach auf @index wie im folgenden Beispiel.

.col-@{index} { 
    width: @col-n-width; 
    left: (@index - 1) * @col-n-width; 
} 

Zum Beispiel, wenn Sie versuchen, eine Schleife/mixin zu schreiben, würde der Code so etwas wie die folgenden sein:

@col-n-width: 200px; 

.create-cols(@index) when (@index > 0) { 
    .col-@{index} { 
    width: @col-n-width; 
    left: (@index - 1) * @col-n-width; 
    } 
    .create-cols(@index - 1); 
} 
.create-cols(5); 

Hinweis: Die @index muss eine Variable in Ihrem weniger definiert werden Datei. Weniger Compiler kann den HTML-Code nicht lesen und dynamisch darauf basierende Klassen erstellen. Im schlimmsten Fall müssten Sie zumindest die clientseitige Kompilierung über JS mit less.modifyVars() aber client-side compilation of code is generally not recommended verwenden.