Bootstrap rapide et sale remplace le temps d'exécution

Bootstrap 5.2 et plus ont fourni des solutions aux méthodes décrites dans cet article. Donc, si vous utilisez Bootstrap 5.2 ou version ultérieure, vous pouvez utiliser directement les variables CSS pour les remplacements personnalisés.

Bootstrap, ce cadre frontal Web à l'ancienne, est aimé par les autres, et certaines personnes se moquent de lui. Quelle que soit la perspective que vous prenez, il s'agit d'un puissant cadre d'interface utilisateur avec une large application, la plupart des gens comprennent ses bases et fournissent des résultats très prévisibles.

Bootstrap a sa propre philosophie de conception. Il vous oblige à construire du HTML d'une manière spécifique, à écraser les styles de manière spécifique, à créer des fichiers principaux d'une manière spécifique et à les inclure de manière spécifique dans le site Web. Normalement, cela est OK à moins que votre collègue n'écrit un mauvais code bootstrap, mais il ne couvre pas tous les cas d'utilisation.

Bootstrap a tendance à être généré du côté du serveur et n'aime pas écraser ses styles lors de l'exécution. Si vous avez besoin d'implémenter une sorte de fonctionnalité de thème visuel dans votre application, Bootstrap vous recommande de générer des feuilles de style distinctes pour chaque thème et de basculer leshets de style si nécessaire. C'est un excellent moyen de le faire si vous donnez à vos utilisateurs un thème prédéfini. Mais que se passe-t-il si vous voulez un thème défini par l'utilisateur? Vous pouvez configurer votre application pour exécuter SASS et compiler de nouveaux styles de style et les enregistrer sur le serveur, mais cela nécessite beaucoup de travail - en plus vous devez communiquer avec le personnel backend et l'équipe DevOps, ce qui serait beaucoup de problèmes si vous le souhaitez, disons, échanger les couleurs primaires et secondaires.

C'est ce à quoi je fais face à ce moment-là.

Je construis une application SaaS multi-utilisateurs utilisant Django et Vue qui a une disposition fixe, mais doit également être en mesure de changer les couleurs de la marque pour chaque compte d'utilisateur et d'avoir un thème de couleur par défaut automatique. Une autre exigence est que nous ne redémacerons pas l'application à chaque fois que nous ajoutons un nouvel utilisateur. Enfin, chaque développeur backend et DevOps est actuellement occupé avec d'autres projets, je dois donc résoudre ce problème seul.

Comme je ne veux pas compiler SASS lors de l'exécution, je peux créer des feuilles de style et les injecter dans la page, mais ce n'est pas une bonne solution parce que nous nous concentrons sur les couleurs. La feuille de style bootstrap compilée rend les valeurs de couleur en tant que valeurs hexadécimales explicites, et (je viens de vérifier) ​​il y a 23 instances de bleu principal dans ma feuille de style. Pour la couleur primaire seule, j'ai besoin de remplacer chaque instance, puis de standardiser à nouveau pour la couleur secondaire, la couleur d'avertissement, la couleur des dangers et toutes les autres conventions et couleurs que nous voulons changer. C'est compliqué et a beaucoup de travail. Je ne veux pas faire ça.

Heureusement, cette nouvelle application n'a pas besoin de prendre en charge Internet Explorer 11, ce qui signifie que je peux utiliser les variables CSS. Ils sont également super, peuvent être définis après le chargement de la feuille de style, coulant dans toutes les directions et modifiant toutes les couleurs que je veux, non? Bootstrap génère cette grande liste de variables dans l'élément racine: donc cela devrait être simple.

À ce stade, j'ai appris que Bootstrap ne rend que certaines de ses valeurs comme variables dans la feuille de style, et que cette liste de variables est entièrement pour l'utilisation de l'utilisateur final. La plupart des variables de cette liste ne sont pas référencées dans le reste de la feuille de style, donc les redéfinir n'a aucun effet. (Cependant, il convient de noter qu'un meilleur support variable d'exécution peut être fourni à l'avenir.)

Je veux donc que ma feuille de style bootstrap soit rendue avec des variables CSS qui peuvent être utilisées du côté serveur plutôt que sur la valeur de couleur statique, ce qui est strictement impossible. Si vous définissez la variable de couleur sur une variable CSS, SASS ne se compilera pas. Il y a des astuces intelligentes pour que Sass fasse cela (un ici, et un de plus), mais ils nécessitent un bootstrap de ramification, et sortir du chemin de mise à niveau donne à mon application une vulnérabilité que je ne suis pas disposée à ajouter. Si je suis totalement honnête, la vraie raison pour laquelle je n'impose pas ces solutions est que je ne peux pas comprendre comment faire fonctionner non plus avec mon compilateur SASS. Mais vous pouvez avoir plus de chance.

Je pense que cela vaut la peine d'expliquer mon flux de travail préféré ici. Je préfère exécuter Sass localement sur ma machine de développement pour construire la feuille de style et soumettre la feuille de style compilée au référentiel. Les recommandations des meilleures pratiques devraient compiler les feuilles de style pendant le déploiement, ce qui est correct, mais je travaille pour une startup croissante et perpétuellement comprise. J'utilise Sass parce que je l'aime, mais c'est évidemment un sujet dans mon travail et je n'ai pas le temps, la capacité ou la force mentale pour intégrer mes constructions SASS avec nos différents pipelines de déploiement.

C'est aussi une sorte de mauvaise défense légale: je ne veux pas que nos développeurs complets entrent en contact avec mes styles élaborés et commencent à écrire ce qu'ils veulent; et je trouve que pour une raison quelconque, ils ont beaucoup de problèmes avec l'installation de nœud sur leurs ordinateurs portables. Bien! Ils ne pouvaient que me demander de l'aide, et c'était exactement comme je le voulais.

Tout cela dit: Si je ne peux pas faire en sorte que la feuille de style soit rendu avec les variables à l'intérieur, alors rien ne peut m'empêcher de l'injecter dans la feuille de style après la compilation de la feuille de style .

Assistez à la puissance de la recherche et du remplacement!

Tout ce que nous avons à faire est d'aller dans Bootstrap et de trouver les couleurs que nous voulons remplacer, qui sont idéalement situées dans le style racine en haut de la feuille de style compilée:

 <code>:root { --bs-blue: #002E6D; --bs-indigo: #6610F2; // ... other variables }</code>

Obtenez la valeur de par exemple --BS-Primary, qui est le Bootstrap Blue à l'ancienne. J'utilise Gulp pour compiler mes feuilles de style, alors regardons la fonction de tâche Sass dans gulpfile.js:

 var gulp = require ('gulp');
var sass = require ('gulp-sass') (require ('sass'));
var sourcemaps = require ('gulp-sourceCemaps');
var gulpreplace = require ('gulp-replace');

fonction sassCompile () {
  return gulp.src ('static / sass / project.scss')
    .Pipe (SourceMaps.Init ())
    .Pipe (sass ({OutputStyle: 'expansé'}))
    .Pipe (sourcemaps.write ('.'))
    .Pipe (gulpreplace (/ # 002e6d / ig, 'var (- ct-primary)')))
    .Pipe (gulp.dest ('statique / css /'));
}
export.sass = sassCompile;

Compilez la feuille de style, puis affichez-la.

 :racine {
  --bs-blue: var (- ct-primaire);
  --BS-INDIGO: # 6610F2;
  // ... Autres variables
}

Super, ok, nous avons maintenant une feuille de style complète qui nécessite une valeur variable pour représenter le bleu. Notez qu'il modifie à la fois la couleur principale et le "bleu". Ce n'est pas une technique subtile. Je l'appelle vite et rugueux pour une raison, mais obtenir un contrôle de remplacement des couleurs plus fin est assez facile si vous en avez besoin. Par exemple, si vous souhaitez garder "Blue" et "Main" en tant que valeurs distinctes, accédez à votre SASS et redéfinissez les variables SASS Blue et $ primaires à différentes valeurs, vous pouvez les trouver et les remplacer séparément comme vous le souhaitez.

Ensuite, nous devons définir la nouvelle valeur de variable par défaut dans l'application. Faire cela dans l'en-tête HTML est très simple:

<link href="/static/css/project.css" rel="stylesheet">
<style>
  :root {
    --ct-primary: #002E6D;
  }
</style>

Exécutez-le et tout apparaîtra. Tout ce qui doit être bleu est bleu. Répétez ce processus plusieurs fois et vous pouvez soudainement contrôler de nombreuses couleurs dans la feuille de style bootstrap. Ce sont les variables que j'ai choisies pour fournir à l'utilisateur et leurs valeurs de couleur par défaut:

 --ct-primary: # 002E6D;
--CT-Primary-Hover: # 00275D;
// ... Autres variables

Maintenant, le plaisir commence! De là, vous pouvez manipuler directement ces valeurs par défaut au besoin, ou ajouter un second: style racine en dessous des valeurs par défaut pour écraser uniquement les couleurs souhaitées. Ou comme moi, mettez un champ de texte dans le profil utilisateur qui publie le style: root sur votre titre, en écrasant tout ce dont vous avez besoin. Écoutez, vous pouvez désormais remplacer le bootstrap au moment de l'exécution sans recompiler la feuille de style ou vous rendre fou.

Ce n'est certainement pas une solution élégante, mais elle résout un cas d'utilisation très spécifique que les développeurs tentent de résoudre depuis des années. Et cela s'est avéré être une solution très efficace pour moi avant que Bootstrap ne décide de nous permettre de remplacer facilement les variables lors de l'exécution.

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!