


Les variables Less comme @navBarHeight peuvent-elles être thématisées ?
Nov 06, 2024 am 07:51 AML'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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques

Faire votre première transition Svelte personnalisée

Téléchargement de fichiers avec Multer dans Node.js et Express
