CSS / LESS Guards mit true und false Werten

Hallo,

man kann in der Theme-Config Checkbox-Felder erstellen, welche true / false in der entsprechenden Variable speichern. Laut LESS Dokumentation (Features In-Depth | Less.js) können diese durch simple when-Abfragen verwendet werden.

Ich bekomme das leider nicht zum laufen und habe bereits mehrere Varianten versucht. Hier Beispiele: In der config_1.json  ist der Wert korrekt übergeben:

"check-boolean": true,

in der global.less schreibe ich beispielhaft:

@check-boolean-var: @check-boolean;
.page-wrap {
    position: relative;
    overflow: hidden;
    & when (@check-boolean = true) {
        display: none;
    }
    & when (@check-boolean-var = true) {
        display: none;
    }
}

.page-wrap-boolean() when (@check-boolean = true) {
    .page-wrap {
        display: none;
    }
}

.page-wrap-boolean2() when (@check-boolean-var = true) {
    .page-wrap {
        display: none;
    }
}

.page-wrap-boolean();
.page-wrap-boolean2();

.page-wrap when (@check-boolean = true) {
    display: none;
}

keiner dieser guards funktionniert.

Habe das ganze nun etwas weiter verfolgt. Es scheint nicht an der Syntax in LESS zu liegen. Vielmehr aktualisieren sich die Inhalte in der Datenbank nicht korrekt?

 

Hi,

ist zwar schon etwas älter aber ich stehe gerade vor der selben Problematik. Gibt es hier eine Lösung?

Es wäre super wenn es geht der bool gewisse Bereiche der CSS Datei zu beeinflussen.

 

LG

h2 {
    .unitize-margin(0, 0, 0, 0);
    
    & when (@theme_option = 1) {
        .unitize-margin(@standard_interspace, 0, @standard_interspace, 0);
     }
}

 

1 Like

@BestShopPossible‍

Vielen Dank, für den Hinweis ich hatte die Abfragen immer auf true oder false aufgebaut nun mit der 1 funzt das wunderbar. Noch ein Beispiel falls wer das gebrauchen kann mit:

& when (@bool-themevar = 1) {
     .class1 {anweisung;}
     .class2 {anweisung;}
}

kann man auch nen ganzen Bereich per Theme Variable ein- bzw. ausschließen.

Viele Grüße