Können Less-Variablen wie @navBarHeight thematisiert werden?

Die Kunst der Thematisierung in weniger

Bei der Entwicklung einer App sind häufige visuelle Änderungen unvermeidlich, da wir eine Kundenvalidierung anstreben. Es ist wünschenswert, bestimmte Seitenästhetiken (Themen) für eine schnelle Kundenpräsentation beizubehalten.

Ein Ansatz besteht darin, Darstellungsklassen zu erstellen, die auf das Textelement angewendet werden, um schnelle Seitentransformationen zu ermöglichen. Dies wirft die Frage auf: Können Less-Variablen wie @navBarHeight thematisiert werden?

Anpassbares Theming mit Less

Die Machbarkeit hängt vom Ausmaß der Stil- und Variablenvariationen ab zwischen Themen. Ein einfacher Ausgangspunkt:

@themes: (
    blue   rgb( 41, 128, 185),
    marine rgb( 22, 160, 133),
    green  rgb( 39, 174,  96),
    orange rgb(211,  84,   0),
    red    rgb(192,  57,  43),
    purple rgb(142,  68, 173)
);

#navBar {
    .themed(background-color);
}

.themed(@property) {
    .for(@themes); .-each(@theme) {
        @name:  extract(@theme, 1);
        @color: extract(@theme, 2);

        .theme-@{name} & {
            @{property}: @color;
        }
    }
}

Über die Grundlagen hinaus: Erweiterte Anpassung

Der Einsatz von Techniken wie Mustervergleich und Regelsatzargumenten ermöglicht die automatisierte Generierung komplexer Themenhierarchien. Betrachten Sie dieses Beispiel:

#navBar {
    .themed({
        color:            @fore-color;
        background-color: @back-color;
    });
}

.theme(@name: green) {
    @fore-color: green;
    @back-color: spin(@fore-color, 180);
    .apply();
}

.theme(@name: blue) {
    @fore-color: blue;
    @back-color: (#fff - @fore-color);
    .apply();
}

.theme(@name: black-and-white) {
    @fore-color: black;
    @back-color: white;
    .apply();
}

Dies ermöglicht ein äußerst anpassungsfähiges Designsystem, das auf spezifische Designanforderungen zugeschnitten ist. Mit Less sind die Möglichkeiten zur flexiblen Thematisierung endlos.

Das obige ist der detaillierte Inhalt vonKönnen Less-Variablen wie @navBarHeight thematisiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!