Schnelle und schmutzige Bootstrap überschreibt zur Laufzeit

Bootstrap 5.2 und höher hat Lösungen für die in diesem Artikel beschriebenen Methoden bereitgestellt. Wenn Sie also Bootstrap 5.2 oder höher verwenden, können Sie CSS -Variablen direkt für benutzerdefinierte Überschreibungen verwenden.

Bootstrap, dieses altmodische Web-Front-End-Framework, wird von anderen geliebt, und manche Menschen spinnen darauf. Unabhängig davon, welche Perspektive Sie einnehmen, ist es ein leistungsstarkes UI -Framework mit einer breiten Anwendung, die meisten Menschen verstehen ihre Grundlagen und liefern höchst vorhersehbare Ergebnisse.

Bootstrap hat eine eigene Designphilosophie. Sie müssen HTML auf eine bestimmte Weise erstellen, Stile auf eine bestimmte Weise überschreiben, Kerndateien auf eine bestimmte Weise erstellen und diese auf eine bestimmte Weise in die Website einbeziehen. Normalerweise ist dies in Ordnung, wenn Ihr Kollege einen schlechten Bootstrap -Code schreibt, aber nicht alle Anwendungsfälle abdeckt.

Bootstrap wird tendenziell auf der Serverseite generiert und mag es nicht, seine Stile zur Laufzeit zu überschreiben. Wenn Sie eine Art visuelle Themenfunktionalität in Ihrer Anwendung implementieren müssen, empfiehlt Bootstrap, dass Sie bei Bedarf separate Stylesheets für jedes Thema und für jedes Thema umschalten. Dies ist eine großartige Möglichkeit, dies zu tun, wenn Sie Ihren Benutzern ein vordefiniertes Thema geben. Aber was ist, wenn Sie ein benutzerdefiniertes Thema wünschen? Sie können Ihre Anwendung so einrichten, dass Sie SASS ausführen und neue Stylesheets kompilieren und auf dem Server speichern. Dies erfordert jedoch viel Arbeit. Außerdem müssen Sie mit dem Backend -Personal und dem DevOps -Team kommunizieren, was viel Ärger hätte, wenn Sie nur die primären und sekundären Farben austauschen möchten.

Das war es, was ich damals ausgesetzt war.

Ich erstelle eine Multi-Benutzer-SaaS-Anwendung mit Django und Vue mit einem festen Layout, muss aber auch in der Lage sein, die Markenfarben für jedes Benutzerkonto zu ändern und ein automatisches Standardfarbthema zu haben. Eine weitere Anforderung ist, dass wir die Anwendung nicht jedes Mal neu einsetzen, wenn wir einen neuen Benutzer hinzufügen. Schließlich ist jeder Backend- und DevOps -Entwickler derzeit mit anderen Projekten beschäftigt, daher muss ich dies alleine beheben.

Da ich Sass zur Laufzeit nicht kompilieren möchte, kann ich Stylesheets erstellen und sie in die Seite injizieren, aber dies ist keine gute Lösung, da wir uns auf Farben konzentrieren. Das kompilierte Bootstrap -Stylesheet macht die Farbwerte als explizite hexadezimale Werte und (ich habe gerade überprüft) 23 Fälle von Hauptblau in meinem Stylesheet. Allein für die Primärfarbe muss ich jede Instanz überschreiben und dann erneut für die sekundäre Farbe, Warnfarbe, Gefahrfarbe und alle anderen Konventionen und Farben, die wir ändern möchten, erneut standardisieren. Es ist kompliziert und hat viel Arbeit. Ich will das nicht tun.

Glücklicherweise muss diese neue Anwendung nicht den Internet Explorer 11 unterstützen, was bedeutet, dass ich CSS -Variablen verwenden kann. Sie sind auch großartig, können definiert werden, nachdem das Stylesheet geladen wurde, in alle Richtungen fließt und alle gewünschten Farben verändert, oder? Bootstrap generiert diese große Liste von Variablen im: Root -Element, daher sollte dies einfach sein.

Zu diesem Zeitpunkt habe ich gelernt, dass Bootstrap nur einige seiner Werte als Variablen im Stylesheet macht und dass diese Variablenliste vollständig für die Verwendung von Endbenutzer dient. Die meisten Variablen in dieser Liste werden im restlichen Stylesheet nicht verwiesen, sodass die Neudefinition nicht auswirkt. (Es ist jedoch erwähnenswert, dass in Zukunft eine bessere Unterstützung für eine bessere Laufzeit -Variable bietet.)

Ich möchte also, dass mein Bootstrap -Stylesheet mit CSS -Variablen gerendert wird, die eher auf der Serverseite als auf dem statischen Farbwert betrieben werden können, was ausschließlich unmöglich ist. Wenn Sie die Farbvariable auf eine CSS -Variable festlegen, kompiliert SASS nicht. Es gibt einige clevere Tricks, um Sass dies zu machen (eine hier und eine weitere), aber sie erfordern verzweigte Bootstrap, und das Aussteigen aus dem Upgrade -Pfad gibt meiner App eine gewisse Anfälligkeit, die ich nicht hinzufügen möchte. Wenn ich ganz ehrlich bin, ist der wahre Grund, warum ich diese Lösungen nicht implementiere, dass ich nicht herausfinden kann, wie ich entweder mit meinem Sass -Compiler zusammenarbeiten kann. Aber Sie mögen besseres Glück haben.

Ich denke, es lohnt sich, meinen bevorzugten Workflow hier zu erklären. Ich bevorzuge es, Sass lokal auf meiner Entwicklungsmaschine zu führen, um das Stylesheet zu erstellen und das kompilierte Stylesheet an das Repository zu senden. Best Practice -Empfehlungen sollten Stylesheets während des Einsatzes kompilieren, was korrekt ist, aber ich arbeite für ein wachsendes, ständig verstandenes Startup. Ich benutze SASS, weil es mir gefällt, aber es ist offensichtlich ein Thema in meiner Arbeit und ich habe nicht die Zeit, die Fähigkeit oder die mentale Kraft, meine Sass -Builds in unsere verschiedenen Einsatzpipelines zu integrieren.

Es ist auch eine Art legaler böse Selbstverteidigung: Ich möchte nicht, dass unsere vollständigen Stack-Entwickler mit meinen aufwändigen Stilen in Kontakt treten und anfangen, alles zu schreiben, was sie wollen. Also! Sie konnten mich nur um Hilfe bitten, und genau so wollte ich.

All dies heißt: Wenn ich das Stylesheet nicht dazu bringen kann, mit den darin enthaltenen Variablen zu rendern, kann mich nichts daran hindern, es in das Stylesheet zu injizieren , nachdem das Stylesheet zusammengestellt wurde .

Erleben Sie die Kraft der Suche und Ersatz!

Alles, was wir tun müssen, ist in Bootstrap zu gehen und die Farben zu finden, die wir ersetzen möchten, die sich bequem im Root -Stil oben auf dem zusammengestellten Stylesheet befinden:

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

Holen Sie sich den Wert von zum Beispiel-BS-Primary, dem altmodischen Bootstrap Blue. Ich verwende Gulp, um meine Stylesheets zu kompilieren. Schauen wir uns also die Sass -Task -Funktion in gulpFile.js an:

 var gulp = require ('gulp');
var sass = require ('gulp-sass') (erfordert ('sass');
var Sourcemaps = Request ('gulp-sourcemaps');
var gulpreplace = required ('gulp-replace');

Funktion SassCompile () {
  return gulp.src ('static/sass/project.scss')
    .pipe (Sourcemaps.init ())
    .pipe (sass ({outputStyle: 'erweitert'}))
    .Pipe (Sourcemaps.Write ('.'))
    .Pipe (gulpreplace (/#002e6d/ig, 'var (-ct-primary)')))
    .pipe (gulp.dest ('static/css/'));
}
exports.sass = sasscompile;

Kompilieren Sie das Stylesheet und sehen Sie es dann an.

 :Wurzel {
  --BS-Blue: var (-CT-Primary);
  --BS-Indigo: #6610f2;
  // ... andere Variablen
}

Großartig, ok, wir haben jetzt ein komplettes Stylesheet, das einen variablen Wert erfordert, um Blau darzustellen. Beachten Sie, dass es sowohl die Hauptfarbe als auch "Blau" ändert. Dies ist keine subtile Technik. Ich nenne es aus einem bestimmten Grund schnell und rau Wenn Sie beispielsweise "Blue" und "Haupt" als separate Werte halten möchten, gehen Sie in Ihre SASS und definieren Sie die Variablen $ blau und $ primärer SASS in verschiedenen Werten neu, dann können Sie sie so separat finden und ersetzen.

Als nächstes müssen wir den neuen Standard -Variablenwert in der Anwendung definieren. Dies im HTML -Header zu tun ist sehr einfach:

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

Führen Sie es aus und alles wird auftauchen. Alles, was blau sein muss, ist blau. Wiederholen Sie diesen Vorgang ein paar Mal und Sie können plötzlich viele Farben im Bootstrap -Stylesheet steuern. Dies sind die Variablen, die ich dem Benutzer zur Verfügung gestellt habe, und deren Standardfarbwerte:

 -CT-Primary: #002E6D;
--CT-Primary-Hover: #00275d;
// ... andere Variablen

Jetzt beginnt der Spaß! Von hier aus können Sie diese Standardwerte bei Bedarf direkt manipulieren oder einen Sekunde hinzufügen: Root -Stil unter den Standardwerten, um nur die gewünschten Farben zu überschreiben. Oder geben Sie wie ich ein Textfeld in das Benutzerprofil ein, das den Root -Stil in Ihren Titel ausgibt, und überschreiben Sie, was Sie brauchen. Schauen Sie, Sie können jetzt die Bootstrap zur Laufzeit überschreiben, ohne das Stylesheet neu zu kompilieren oder sich verrückt zu machen.

Dies ist sicherlich keine elegante Lösung, aber es löst einen sehr spezifischen Anwendungsfall, den Entwickler seit Jahren zu lösen versuchen. Und dies hat sich für mich als sehr effiziente Lösung erwiesen, bevor Bootstrap beschloss, die Variablen zur Laufzeit leicht zu überschreiben.

Das obige ist der detaillierte Inhalt vonSchnelle und schmutzige Bootstrap überschreibt zur Laufzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!