Vale la pena di imparare Haml & sass?

Question

Nella sua esperienza professionale hanno Haml e sass dimostrato di essere utile? In che modo?

Answer 1

Haml è bello, e lo uso molto, ma Sass è valsa la pena da sola, soprattutto se si deve costruire fogli di stile complesse. Ad esempio, una delle cose peggiori di CSS è quanto la ridondanza che devi fare quando si nomina selettori. In CSS, quello che dovete fare

#navbar ul 
#navbar ul li a
#navbar ul li a:hover

Con Sass, si può semplicemente nidificare questi discendenti naturalmente.

#navbar

  ul
    margin: 0
    padding: 0
    list-style: none
    width: 100%

    li
      margin: 0
      float: left
      margin-right: 10px
      border: 1px solid #000

      a
        text-decoration: none

        &:hover
          color: red

È inoltre possibile utilizzare le variabili

!border_color = #333

.box
  border = 1px "solid" !border_color

E si può utilizzare la matematica con loro

!measure = 18px
!text_size = !measure / 1.5

body
  font-size = !text_size
  line-height = !measure

h1
  font-size = !measure
  margin-bottom = !measure

h2
  font-size = !measure + 2

#wrapper
  width = !measure * 50

È inoltre possibile condividere codice

=rounded
  -moz-border-radius: 4px
  -webkit-border-radius: 4px
  border-radius: 4px
  border: 1px solid #000

.box
 +rounded

C'è così tanto potere in questo che lo dovete a voi stessi di imparare. Inoltre, il risultato finale è semplice CSS in modo che possa essere convertito.

Non dimenticare css2sass che converte il CSS esistente per sass file!

Si può giocare con alcuni esempi a http://rendera.heroku.com/ Se desideri piace. E 'un sito che ho costruito per aiutare le persone a imparare HTML5 e CSS3 e ho il supporto sia per HAML e SASS lì.

Inoltre, dare un'occhiata a StaticMatic (staticmatic.rubyforge.org) per un fantastico modo per fare il lavoro del sito web statico con HAML e SASS. Esso genera siti web si possono caricare a host statici e ha un sistema di layout e template simile a Ruby on Rails.

Per affrontare la questione direttamente lei ha chiesto, a titolo di "ne vale la pena", la risposta è sì. Essere in grado di utilizzare le variabili, facilmente le cose di gruppo tramite selettore, e condividere il codice tramite moduli rende i fogli di stile complessi molto più facile. Costruire i fogli di stile non ci vuole molto a tutti, ed è possibile utilizzare la struttura Compass eccellente per andare anche oltre. Ad esempio, è possibile utilizzare i 960.gs o moduli Blueprint di mescolare quei quadri nei vostri fogli di stile esistenti. In questo modo non c'è bisogno di cambiare la marcatura del codice. Aggiunta 960.gs e la sua "grid_12" e classi "container_12" per tutto il vostro markup potrebbe non essere possibile, ma con la bussola e Sass si tratta di un gioco da ragazzi.

Sass rende anche più facile avere più fogli di stile per la modalità di sviluppo e generare un unico foglio di stile per la produzione, migliorando così le prestazioni sul lato client (meno chiamate al server il caricamento della pagina.)

HAML ha i suoi vantaggi, anche se sono non così evidente come Sass. HAML non lo rende incredibilmente facile da elementi nido e dichiarare DIVS ... utilizzando anche 960.gs regolari per esempio è facile con HAML:

#header.container_12
  .grid_12
     %h1 Welcome!
#middle.container_12
  .grid_8
     %h2 Main content
  .grid_4
     %h3 Sidebar

Molto meno di battitura. E se si decide è necessario aggiungere un wrapper per tutte che per qualche ragione, basta rientrare il tutto sotto una nuova etichetta.

La speranza che aiuta. I <3 Sass.

Answer 2

Il mio sito web attuale dispone di oltre 800 file Haml e 150 file Sass, e lasciate che vi dica che ha aiutato il mio sviluppo tremendamente.

Il più grande vantaggio è in termini di rapido sviluppo:. La creazione di file Haml / Sass richiede molto meno di battitura, in modo da poter inchiodare la vostra logica di presentazione con molti meno pressioni dei tasti rispetto se si stesse facendo un modello di erb

Ho anche trovare i file molto più facile Haml da leggere, e meno soggetto a errori.

YMMV, ma ho raggiunto il punto che non si utilizza Haml si sente come un lavoro di routine.

Answer 3

TL; DR - Mentre popolare, preferisco non usare HAML o SASS, ma mi piace SCSS

.

Sembra che il consenso generale sul HAML è schiacciante a favore di esso, ma personalmente non mi interessa per questo.

Se la mia intenzione è quella di generare codice HTML, quindi preferisco il linguaggio di template di essere il più vicino HTML possibile. Questo evita di dover imparare un altro livello di indirezione che aggiunge possibilità di confusione ed errori, nonché di incorrere in testa cognitivo.

trovo i vincoli che luoghi Haml sul mio uso preferito di spazi per la leggibilità e la linea di confezionamento ad essere oneroso e si traduce spesso in una sintassi che può essere difficile da leggere.

Di recente ho incontrato un sottile errore in un modello HAML che sarebbe stato immediatamente chiaro se il modello fosse ERB, ad esempio:

 .table
   .thead
   .tr
   .tr

Le righe della tabella sono non all'interno del tag THEAD, che è perfettamente valido HAML, ma non corretto rispetto alla struttura HTML previsto. Mentre la pagina è apparso per rendere correttamente, un selettore CSS fallito, che ha provocato un fallimento silenzioso del codice Javascript.

Sono sicuro che questo tipo di errore sarebbe ovvio per la maggior parte degli utenti Haml, come mostrato in isolamento, ma nel contesto di un modello più grande, può essere difficile da individuare; soprattutto per uno sviluppatore di nuovo da HAML.

D'altra parte, se questo fosse ERB o HTML:

 <table>
   <thead>
   <tr>...</tr>
   <tr>...</tr>

Al mio occhio, l'errore nella struttura è molto più facile da individuare a causa del modo in cui ERB e HTML sono quasi sempre frastagliata.

Dopo aver trascorso quasi due decenni di scrittura HTML, devo ammettere che ho un certo orgoglio per iscritto ben formato HTML e non vedo alcun motivo per imparare un modo diverso di rappresentarlo e di apprendimento di tutte le nuove modelli visivi necessari per individuare gli errori .

D'altra parte, mi piace molto SCSS (al contrario di SASS) perché SCSS è essenzialmente un superset di CSS. Non aggiunge un nuovo livello di riferimento indiretto che ho bisogno di tradurre mentalmente. Si aggiunge solo un cambiamento modesto nella sintassi che fornisce una rappresentazione più concisa (e asciutto) di CSS che trovo molto facile da leggere e capire.

In realtà, io non Utilizza qualsiasi linguaggio che impone una sintassi severe per quanto riguarda come dovrei rientrare o linea avvolgere il mio codice, come pitone. O le lingue che servono solo come strato di indirezione in cima ad un linguaggio di base, come CoffeeScript.

Non sto dicendo che io credo astrazione e indiretto sono male in linguaggi di programmazione; non solo che preferisco usarli rispetto alle lingue specifiche discusse qui.