Share
Bootstrap-ul Twitter este incontestabil popular - și dacă sunteți un fan al preprocesoarelor CSS, vă va plăcea faptul că este construit pe LESS. Din păcate, dacă tu (ca mine) te bucuri de a lucra cu SASS, în mod obișnuit nu a fost nimic ușor de pus la dispoziție pentru a începe. Pana acum. Acest tutorial va explica cum să combinați SASS, Compass și Bootstrap-ul Twitter.
Sigla nouă Sass de Bermon Painter
Pentru început, va trebui să descărcați câteva elemente. Veți avea nevoie și de editorul dvs. de text preferat; Eu folosesc WebStorm de la JetBrains, dar ești liber să folosești ceea ce preferi.
Folosiți rubyinstaller.org pentru a putea să luați Ruby și apăsați pe butonul roșu de descărcare roșie. În pagina Descărcări, mergeți mai departe și dați clic pe linkul curent Rails. Versiunea pe care o folosesc astăzi este: rubyinstaller-1.9.3-p286
Odată ce începe descărcarea, va trebui să mergem și să luăm un reloader live. Pe o mașină Windows, mergeți la Scout; reloader-ul live de alegere, utilizatorii de Mac vor folosi mai mult LiveReload.
Următoarea sarcină este apucarea unei mari ediții SASS a lui Bootstrap-SASS de la Twitter de la GitHub: faceți clic pe ZIP ... (Nu pot să-i mulțumesc lui Thomas McDonald pentru această conversie de la LESS.)
Bine, asta e pentru descărcare.
Continuați și instalați programul de instalare Ruby și Scout.
Acum creați un dosar temporar și extrageți zipul Bootstrap-Sass în el:
Apoi, trebuie să ne îndreptăm în fereastra Prompt Command pentru a configura proiectul nostru. Mergeți și introduceți gem instala busola la promptul C: \.
Aceasta va instala busola pe masina ta. Asteptati cateva minute pentru a termina (poate apuca o cafea). După ce ați terminat, continuați și închideți promptul de comandă.
Treceți direct pe directorul în care doriți să plasați noul proiect, apoi pe Shift + Right Click (pe Windows) în dosarul respectiv. Apoi alegeți fereastra Open Command Here. Odată ce este deschis, tastați compasul crea YourProjectName. De asemenea, puteți naviga la proiectul dvs. direct prin intermediul liniei de comandă - consultați Introducerea unui designer la linia de comandă pentru mai multe detalii despre directoarele de traversare.
Asta este pentru crearea proiectului dvs. Compass / Sass.
Îți amintești când ai creat dosarul temporar? Acum este momentul să luați Bootstrap pentru ao arunca.
Treceți pe "YourTempFolder \ thomas-mcdonald-bootstrap-sass-dabed1e \ vendor \ assets". Acolo, veți copia conținutul dosarului Active și veți lipi în folderul proiectului. Doar mergeți mai departe și ștergeți, de exemplu, ecran, și print.scss în folderul dvs. Sass.
Dosarul proiectului trebuie să arate astfel:
Veți avea acum un proiect Bootstrap creat cu toate bunele produse SCSS. Acum, pentru a vă ridica html-ul pentru început, voi folosi fluid.html din șabloanele html de pe site-ul Bootstrap al Twitter-ului.
În timp ce vă aflați pe site, vizualizați sursa, apoi copiați-o (o modalitate destul de ușoară de a obține o marcă de bază Bootstrap). Apoi, aprindeți editorul de text, creați un fișier nou și denumiți-l index.html. Continuați și lipiți conținutul HTML din șablonul HTML Bootstrap al Twitter-ului.
Odată ce ați terminat, continuați și editați html pentru a indica toate referințele la structura fișierului dvs., adică ... href = "... /assets/ico/favicon.ico" în href = "images / favicon.ico".
Și nu uitați să setați referința foii de stil la "stylesheets / style.css"! De asemenea, va trebui să schimbați jquery.js în bootstrap.js. Ia-ți timp și îndreptați referințele HTML pentru a se potrivi căilor de proiect.
Creați un fișier numit stil.scss în dosarul dvs. Sass, așa că Scout știe ce să caute. Încercați săgeți! Cercetașul ar trebui să arate astfel odată ce ați apăsat butonul de redare.
Acesta va crea și actualiza css-ul automat, comportându-vă în mod eficient ca și comanda "watch compass".
Ia-ti style.scss deschis în editorul de text, trebuie să adăugați două reguli de import: @import 'bootstrap'; și @import 'bootstrap-responsive';. Salvați-l!
Felicitări, aveți acum un site de lucru Bootstrap și Sass, foarte ușor de modificat și Sass!
Notă: Mixinurile și variabilele pot fi schimbate cu ușurință prin accesarea /bootstrap/_mixins.scss și /bootstrap/_variables.scss.
Puterea lui Bootstrap și Sass nu poate fi negată; utilizați această putere cu înțelepciune! Pentru orice referire la utilizarea bootstrap-ului Twitter, verificați seria Bootstrap 101 sau accesați site-ul Web Bootstrap al Twitter-ului și proiectul lui Thomas McDonald pe platforma GitHub. Dacă nu altceva, trimite-i o mulțumire rapidă!
Iată legăturile din nou, plus câteva resurse suplimentare de învățare.
Accentsconagua