Stilo è un pre-processore di codice CSS, che ci permette di lavorare più semplicemente nel nostro editor di testo e poi spiego i motivi della mia affermazione.
Questo è un foglio di stile come lo conosciamo:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
E questo sarebbe lo stesso foglio di stile creato con Stilo:
carattere del corpo 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Dove sono le chiavi? Dove sono finiti i punti e virgola, i due punti? Dimenticato Stilo lo fa per noi.
Se stai iniziando con CSS y HTML non è consigliato l'uso Stilo per il semplice fatto che puoi dimenticare come funzionano davvero le cose, ma se hai già tempo in questo mondo e vuoi salvarti codice e lavorare .. vai avanti.
Programmatori Python troveranno in Stilo qualcosa di molto simile a ciò a cui sono adattati, dal momento che devi solo indentare correttamente per eseguire la magia.
Installazione
Per Stilo lavoro che dobbiamo installare Node.js che si trova nel ramo Comunità , quindi procediamo a farlo:
$ sudo pacman -S nodejs
E successivamente installiamo Stylus. Il modo tradizionale sarebbe:
$ npm install -g stylus
Si installa bene, ma non funziona per me, quindi è molto più facile da installare da AUR:
$ yaourt -S nodejs-stylus
Come usare lo stilo
Ok, abbiamo già installato Node.js e abbiamo installato Stilo.. come lo usiamo? È semplice. Supponiamo di avere una directory con i seguenti file:
- dir - index.html - style.css
Quello che dobbiamo fare è creare il file stile.stile, che è quello su cui lavoreremo. In quel file possiamo avere qualcosa come:
body background-color #ffff font-size 12px a.button color red padding 10px
Se salviamo o apportiamo modifiche non succede nulla, perché non stiamo "compilando" il nostro file. Per compilarlo, quello che facciamo è aprire un terminale nella nostra directory (dove il file stile.stile) ed eseguiamo:
stylus -c style.styl
Ma ogni volta che salviamo il file stile.stile dovremmo eseguire il codice, ma fortunatamente non è necessario, poiché se eseguiamo lo stesso comando, ma aggiungendo il parametro -w (guarda) succede quanto segue:
stylus -c -w style.styl guardando /usr/lib/node_modules/stylus/lib/functions/index.styl compilato style.css guardando style.styl compilato style.css compilato style.css
In altre parole, il file viene compilato automaticamente, il risultato sarebbe?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Come puoi vedere, non solo il nostro codice ci crea CSS, ma elimina gli spazi non necessari in modo che il nostro foglio di stile pesi meno 
Non solo quello, Stilo Ci permette di passare i file in CSS nel loro formato e il modo in cui possiamo usare la loro sintassi è molto vario. E questa è solo un'anteprima. Quindi ti incoraggio, se sei interessato, a saperne un po 'di più Stilo