rotaie + bussola: vantaggi vs utilizzando direttamente Haml + progetto

Question

Ho avuto qualche esperienza con Haml (+ sass) su progetti di rotaie. Recentemente ho iniziato ad usare loro con blueprintcss - l'unica cosa che ho fatto è stato trasformare blueprint.css in un file sass, e ha iniziato la codifica da lì. Ho anche un rotaie generatore che include tutto questo per impostazione predefinita.

Sembra che Compass fa quello che faccio, e altre cose. Sto cercando di capire che cosa quelle altre cose sono -. Ma la documentazione / tutorial non erano molto chiare

Queste sono le mie conclusioni:

• Compass è dotato di built-in mixins Sass che implementano idiomi CSS comuni, come ad esempio i collegamenti con le icone o elenchi orizzontali. La mia soluzione non prevede nulla del genere. (1 punto per Compass).
• Compass ha diverse opzioni della riga di comando : è possibile creare un progetto di rotaie, ma si può anche "install" su proiettare binari esistenti. Un rotaie generatore potrebbe essere personalizzato per fare la stessa cosa, immagino. (Pareggio).
• Compass ha due modalità di lavorare con progetto: l'uso "di base" e "semantica". Io non sono chiare sulle differenze tra quelli. Con i miei rotaie generatore Ho un solo modo, ma sembra abbastanza. (Pareggio)
• Apparentemente, bussola viene preparato ad uso altri quadri , oltre matrice (ad esempio YUI). Non riuscivo a trovare molta documentazione su questo, e non mi interessa su di esso in ogni caso -. progetto è ok per me (Tie)
• curva di apprendimento Compass' sembra un po 'rigido e la documentazione sembra scarsa. L'apprendimento potrebbe essere un po 'difficile. D'altra parte, so che i pro ei contro del mio sistema e può essere utilizzato subito. (1 punto per il mio sistema).

Con questa analisi, sono riluttanti a dare una prova della bussola.

E 'la mia analisi è corretta? Sono Mi sto perdendo tutti i punti chiave, o di avere ho valutato uno qualsiasi di questi punti torto?

Answer 1

Compass sembrava una grande soluzione anche per me, ma dopo aver provato su un progetto non ho davvero vedere il grande vantaggio di utilizzare per me. Come te, sto bene con progetto, e non ho visto il bisogno di aggiungere ancora un altro strato sopra Haml / sass.

Alla fine ho messo a nudo la bussola da quel progetto e basta andare con una versione sass dei file CSS Blueprint, e passare da lì. I memorizzare qualsiasi stili personalizzati / o supplementari in un file distinto sass e basta. Non c'è bisogno di bussola o qualcosa di simile, se si desidera solo per mantenere le cose semplici.

Answer 2

L'obiettivo ideale è la separazione di stile e contenuti: non è sempre possibile al 100%, ma può essere fatto ragionevolmente bene utilizzando il markup semantico. Blueprint e altri CSS quadri assolutamente non riescono a questo.

L'idea originale dietro Compass è stato quello di evitare di inquinare HTML con il markup visivo che genera Blueprint: se siete class="column-4" scrittura nel markup, allora si potrebbe anche mettere style="width:160px" in là, invece. Semanticamente è lo stesso significato e la stessa quantità di ripetizioni da mantenere.

Compass trasforma una classe Blueprint come .column-4 in un mixin che è possibile applicare a un selettore di significato:

#sidebar
  +column(4)

In questo modo, avete solo bisogno di mantenere nel foglio di stile, e non tra una serie di modelli e file HTML.

Compass è un progetto-aware. E 'in grado di gestire la compilazione di tutto il tuo albero di fogli di stile, anche automaticamente durante il salvataggio quando si esegue compass watch.

Ci sono alcune funzioni molto utili forniti da bussola, ad esempio:

image_url è una funzione configurabile in grado di gestire i percorsi relativi o assoluti o anche impostare la rotazione degli asset host se è necessario.

Il modulo CSS3 si prende cura di tutte le regole di stile specifico del browser per gli angoli arrotondati, ombre, ecc.

utilità generali di fornire aiutanti per la roba che fare tutto il tempo, ma con meno ripetizioni (in particolare per i problemi cross-browser). Questi sono alcuni tra quelli di base che uso molto:

• + clearfix e + pie-clearfix (metodi di compensazione cross-browser)
• + float in modo da garantirvi non dimenticare display: inline di fronte ad essa per IE ... (. Se arriva il momento di abbandonare i vecchi IE, è una singola modifica)
• + sostituire il testo nasconde il testo e le posizioni uno sfondo sostituzione delle immagini.
• + hover-link aggiunge il: hover regola sottolineatura ad uno stile di collegamento di base

È possibile controllare questi fuori sul nuovo docs sito per Compass .

Poi, Compass fornisce i servizi per un certo numero di altri framework di stile in aggiunta al Blueprint built-in. Fare il check-out Susy per esempio, che è un quadro di layout Sass-native, non solo un porto CSS. E 'specializzata in griglie flessibili e fluidi.

Answer 3

'modalità Semantic' si riferisce alla possibilità di utilizzare i nomi delle classi più semantici di quadri quelli css spedito con: .article vs .grid_1. che personalmente ritengo sia un grande +.

Answer 4

Io non sono sicuro se queste risorse hanno dimostrato solo di recente, ma hanno visto il aiutanti Bussola CSS3 e le utilità generali - (entrambi ben documentato a mio parere) - hanno davvero accelerato la mia interfaccia costruisce un grande affare.

Un'altra grande risorsa è il Compass plugin pagina .

Personalmente mi piace copiare questi file di utilità Sass il rubygem e inserirli manualmente nei file Sass del mio progetto, come ci si sente abbastanza strano riferimento Sass che viene memorizzato fuori dal progetto.