Les variables Less comme @navBarHeight peuvent-elles être thématisées ?

L'art de la thématisation en moins

Lors du développement d'une application, des modifications visuelles fréquentes sont inévitables alors que nous nous efforçons d'obtenir la validation du client. Il est souhaitable de conserver certaines esthétiques de page (thèmes) pour une présentation rapide au client.

Une approche consiste à créer des classes d'apparence appliquées à l'élément body, permettant des transformations rapides de page. Cela soulève la question : les variables Less telles que @navBarHeight peuvent-elles être thématisées ?

Thème personnalisable avec Less

La faisabilité de cela dépend de l'étendue du style et des variations variables entre les thèmes. Un point de départ simple :

@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;
        }
    }
}

Au-delà des bases : personnalisation améliorée

L'emploi de techniques telles que la correspondance de modèles et les arguments d'ensemble de règles permet la génération automatisée de hiérarchies de thèmes complexes. Prenons cet exemple :

#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();
}

Cela permet un système de thèmes hautement adaptable et adapté aux exigences de conception spécifiques. Avec Less, les possibilités de thématisation flexible sont infinies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!