Share
Il Bootstrap di Twitter è innegabilmente popolare - e se sei un fan dei CSS preprocessor ti innamorerai del fatto che è basato su LESS. Sfortunatamente, se tu (come me) ti piace lavorare con SASS, di solito non c'è nulla di pronto a farti iniziare. Fino ad ora. Questo tutorial spiegherà come combinare SASS, Compass e Bootstrap di Twitter.
Nuovo logo Sass di Bermon Painter
Per cominciare, avremo bisogno di scaricare alcune risorse. Avrai anche bisogno del tuo editor di testo preferito; Io uso WebStorm da JetBrains, ma sei libero di usare quello che preferisci.
Vai su rubyinstaller.org così possiamo prendere Ruby e premere il pulsante rosso di download. Nella pagina Download, vai avanti e fai clic sul link Rails corrente. La versione che sto usando oggi è: rubyinstaller-1.9.3-p286
Una volta che inizierà il download, avremo bisogno di andare e prendere un reloader live. Su una macchina Windows, vai su Scout; il mio live reloader di scelta, gli utenti Mac useranno molto probabilmente LiveReload.
Il prossimo compito è l'acquisizione di una fantastica edizione SASS di Bootstrap-SASS di Twitter da GitHub: basta cliccare su ZIP ... (Non posso ringraziare abbastanza Thomas McDonald per questa conversione da LESS).
Ok, è tutto per il download.
Vai avanti e installa il programma di installazione di Ruby e Scout.
Ora crea una cartella temporanea ed estrai la zip Bootstrap-Sass in essa:
Successivamente, dobbiamo accedere alla finestra del prompt dei comandi per impostare il nostro progetto. Vai avanti e digita gemma installare bussola al prompt C: \.
Questo installerà la bussola sulla tua macchina. Aspetta un paio di minuti per finire (magari prendi un caffè). Una volta terminato, vai avanti e chiudi il prompt dei comandi.
Andare alla directory in cui si desidera posizionare il nuovo progetto, quindi premere Maiusc + Tasto destro (su Windows) su quella cartella. Quindi seleziona Apri finestra di comando qui. Una volta aperto, digita bussola crea YourProjectName. Puoi anche navigare verso il tuo progetto direttamente tramite il prompt dei comandi - controlla Introduzione di A Designer alla riga di comando per maggiori dettagli sulle directory di movimento.
Questo è tutto per creare il tuo progetto Compass / Sass.
Ti ricordi quando hai creato quella cartella temporanea? Ora è il momento di andare a prendere Bootstrap per buttarci dentro.
Andate su 'YourTempFolder \ thomas-mcdonald-bootstrap-sass-dabed1e \ vendor \ assets'. Lì, copierai i contenuti della cartella Asset e incollali nella cartella del tuo progetto. Basta andare avanti e cancellare ie, screen e print.scss nella cartella Sass.
La cartella del tuo progetto dovrebbe assomigliare a questa:
Ora avrai un progetto Bootstrap configurato con tutti gli extra SCSS. Ora per prendere il tuo html per iniziare, userò fluid.html dai template html sul sito web di Bootstrap di Twitter.
Mentre sei sul sito web, guarda il sorgente, quindi copialo (un modo abbastanza semplice per ottenere qualche markup di base per Bootstrap). Quindi, attiva l'editor di testo, crea un nuovo file e nominalo index.html. Vai avanti e incolla i contenuti HTML dal modello HTML Bootstrap di Twitter.
Una volta finito, vai avanti e modifica l'html per puntare tutti i riferimenti alla struttura del tuo file, cioè ... href = "... /assets/ico/favicon.ico" per href = "images / favicon.ico".
E non dimenticare di impostare il riferimento del foglio di stile su "stylesheets / style.css"! Dovrai inoltre modificare jquery.js in bootstrap.js. Prenditi il tuo tempo e apporta i riferimenti HTML per abbinare i percorsi del tuo progetto.
Crea un file chiamato style.scss nella tua cartella Sass, quindi Scout sa cosa cercare. Fire Scout up! Lo scout dovrebbe assomigliare a questo una volta che si preme il pulsante di riproduzione.
Creerà e aggiornerà automaticamente il tuo css, comportandosi in modo efficace come il comando 'orologio da bussola'.
Prendi il tuo style.scss aperto nel tuo editor di testo, devi aggiungere due regole di importazione: @import 'bootstrap'; e @import 'bootstrap-responsive';. Salvarla!
Congratulazioni, ora hai un sito Bootstrap e Sass funzionante e molto modificabile!
Nota: I mixin e le variabili possono essere modificati facilmente andando rispettivamente in /bootstrap/_mixins.scss e /bootstrap/_variables.scss.
La potenza di Bootstrap e Sass non può essere negata; usa saggiamente questo potere! Per qualsiasi riferimento all'uso del bootstrap di Twitter, dai un'occhiata alla nostra serie Bootstrap 101 o vai al sito web Bootstrap di Twitter, e forgiamo il progetto di Thomas McDonald su GitHub. Se non altro, mandagli un rapido grazie!
Ecco di nuovo i collegamenti, oltre a un paio di risorse di apprendimento aggiuntive.
Accentsconagua