Share
Der Bootstrap von Twitter ist unbestreitbar beliebt - und wenn Sie ein Fan von CSS-Präprozessoren sind, werden Sie die Tatsache lieben, dass er auf LESS basiert. Wenn Sie (wie ich) gerne mit SASS arbeiten, steht leider nichts zur Verfügung, um Ihnen den Einstieg zu erleichtern. Bis jetzt. In diesem Tutorial wird erklärt, wie man SASS, Compass und Twitter Bootstrap kombiniert.
Neues Sass-Logo von Bermon Painter
Zunächst müssen wir einige Assets herunterladen. Sie benötigen auch Ihren bevorzugten Texteditor. Ich verwende WebStorm von JetBrains, aber Sie können das, was Sie möchten, frei verwenden.
Gehen Sie zu rubyinstaller.org, damit wir Ruby packen können und drücken Sie den großen roten Download-Button. Klicken Sie auf dieser Downloadseite auf den aktuellen Rails-Link. Die Version, die ich heute verwende, ist: rubyinstaller-1.9.3-p286
Sobald der Download beginnt, müssen wir uns einen Live-Reloader holen. Gehen Sie auf einem Windows-Computer zu Scout; Bei meinem Live-Reloader der Wahl werden Mac-Benutzer wahrscheinlich LiveReload verwenden.
Die nächste Aufgabe besteht darin, eine großartige SASS-Edition von Twitter Bootstrap-SASS von GitHub zu erwerben: Klicken Sie einfach auf ZIP… (Ich kann Thomas McDonald für diese Konvertierung von LESS nicht genug danken.)
Okay, das ist es zum Download.
Installieren Sie das Ruby-Installationsprogramm und den Scout.
Erstellen Sie nun einen temporären Ordner und extrahieren Sie die Bootstrap-Sass-Zip-Datei darin:
Als nächstes müssen wir uns in unser Eingabeaufforderungsfenster begeben, um unser Projekt einzurichten. Fahren Sie fort und tippen Sie ein gem installieren kompass an der Eingabeaufforderung C: \.
Dadurch wird der Kompass auf Ihrem Computer installiert. Warten Sie einfach ein paar Minuten, bis Sie fertig sind (vielleicht einen Kaffee trinken). Sobald dies erledigt ist, schließen Sie die Eingabeaufforderung.
Wechseln Sie zu dem Verzeichnis, in dem Sie Ihr neues Projekt ablegen möchten, und klicken Sie dann mit der rechten Maustaste (bei Windows) auf den Ordner. Wählen Sie dann Befehlsfenster hier öffnen. Sobald das geöffnet ist, tippen Sie ein Kompass erstellen YourProjectName. Sie können auch direkt über die Eingabeaufforderung zu Ihrem Projekt navigieren. Weitere Informationen zum Durchführen von Verzeichnissen finden Sie in der Einführung des Designers in die Befehlszeile.
Das ist alles, um Ihr Compass / Sass-Projekt zu erstellen.
Erinnern Sie sich, als Sie diesen temporären Ordner erstellt haben? Jetzt ist es an der Zeit, Bootstrap zu packen und hineinzuwerfen.
Gehen Sie weiter über 'YourTempFolder \ thomas-mcdonald-bootstrap-sass-dabed1e \ vendor \ assets'. Dort kopieren Sie den Inhalt des Assets-Ordners und fügen ihn in Ihren Projektordner ein. Löschen Sie einfach den Bildschirm und die print.scss-Datei in Ihrem Sass-Ordner.
Ihr Projektordner sollte ungefähr so aussehen:
Sie haben jetzt ein Bootstrap-Projekt mit allen SCSS-Goodies eingerichtet. Um jetzt Ihre HTML-Datei abzurufen, verwende ich fluid.html aus den HTML-Vorlagen auf der Bootstrap-Website von Twitter.
Sehen Sie sich auf der Website die Quelle an und kopieren Sie sie (eine ziemlich einfache Möglichkeit, einige grundlegende Bootstrap-Markups zu erhalten). Starten Sie dann Ihren Texteditor, erstellen Sie eine neue Datei und nennen Sie sie index.html. Fahren Sie fort und fügen Sie den HTML-Inhalt aus der Bootstrap-HTML-Vorlage von Twitter ein.
Wenn dies abgeschlossen ist, bearbeiten Sie die HTML-Datei, um alle Verweise auf Ihre Dateistruktur zu zeigen, dh… href = "… /assets/ico/favicon.ico" auf href = "images / favicon.ico".
Vergessen Sie nicht, Ihren Stylesheet-Verweis auf "stylesheets / style.css" zu setzen! Sie müssen auch jquery.js in bootstrap.js ändern. Nehmen Sie sich Zeit und glätten Sie die HTML-Referenzen entsprechend Ihren Projektpfaden.
Erstellen Sie in Ihrem Sass-Ordner eine Datei namens style.scss, damit Scout weiß, wonach er suchen soll. Fire Scout auf! Der Scout sollte so aussehen, wenn Sie auf die Wiedergabetaste klicken.
Es erstellt und aktualisiert Ihre CSS automatisch und verhält sich effektiv wie der Befehl 'compass watch'.
Bekomm dein style.scss In Ihrem Texteditor geöffnet, müssen Sie zwei Importregeln hinzufügen: @import 'bootstrap'; und @import 'Bootstrap-responsive';. Speichern Sie es!
Glückwunsch, Sie haben jetzt eine funktionierende und sehr modifizierbare Bootstrap- und Sass-Site!
Hinweis: Die Mixins und Variablen können einfach geändert werden, indem Sie in /bootstrap/_mixins.scss und /bootstrap/_variables.scss gehen.
Die Macht von Bootstrap und Sass kann nicht geleugnet werden. Nutze diese Macht weise! Für Hinweise zur Verwendung des Bootstraps von Twitter schauen Sie sich unsere Bootstrap 101-Serie an oder besuchen Sie die Bootstrap-Website von Twitter und informieren Sie sich bei Thomas McDonald über GitHub. Wenn nichts anderes, schicken Sie ihm ein schnelles Dankeschön!
Hier noch einmal die Links und ein paar zusätzliche Lernressourcen.
Accentsconagua