Scout, un client per Sass e Compass

Scout, in pochi semplici passi, offre maggior controllo, ottimizzazione e organizzazione nella gestione del flusso di lavoro dei CSS e non sono richieste conoscenze da sviluppatore per avere tutto questo.
Scout, un client per Sass e Compass

Cos’è Scout

Scout è un’applicazione cross-platform che fornisce la potenza di Sass & Compass nelle mani dei web designer eseguendo il tutto in ambiente Ruby, permettendoti di gestire con facilità tutti i progetti Sass con una manciata di click. Entrambi infatti necessitano di ruby installato e di altre configurazioni via terminale. L’app farà tutto il lavoro sporco che altrimenti avresti dovuto fare tu via terminale e ti fornisce un ambiente pronto per fare ciò che più ti piace e cioè creare CSS.

Facciamo un pò di chiarezza

Per chi non avesse conoscenze Sass e Compass, forse è meglio fare un piccolo passo indietro. Sass è un’estensione del CSS che aggiunge regole annidate, variabili, funzioni mixin e molto altro. Compass è un framework CSS open source che rende l’utilizzo dei CSS3 molto più immediato e Compass lavora esclusivamente con Sass. Entrambi, come già ho detto, hanno bisogno di Ruby.

Cominciare a lavorare in 3 step

Scaricate l’installar dal sito ufficiale di Scout e installatelo. Occorreranno davero pochi minuti per configurare il tuo primo progetto. Il vantaggio principale è quello di evitare di dover usare il terminale per installare ruby e configurare directory file e progetti. Ecco un piccolo video di presentazione di Scout in cui viene spiegato come avviare velocemente un nuovo progetto:

Clicca sull’unico pulsante che vedi!

Impostare Scout è semplicissimo. Appena viene aperto la prima volta, l’unica scelta possibile è cliccare sul simbolo “+” in basso a sinistra. Cosi facendo verrà aperta la scheda per settare le impostazioni del vostro nuovo progetto.

scout01

Settate le impostazioni del progetto

Puoi impostare il nome del progetto, il percorso del file con estensione scss che conterrà le istruzioni con sintassi sass e il percorso del CSS standard generato in automatico da Scout; io ho deciso di mettere entrambi nella stessa directory. Puoi scegliere anche altri percorsi, come immagini e js e il tipo di compressione dell’output. Per quanto riguarda invece la tendina relativa all’environment, se scegli development, l’app in automatico inserirà molti commenti per tenere traccia di tutto, prima di andare in produzione, cambi la scelta e il css finale verrà ripulito da tutti i commenti. Prima di passare alla scheda “log” bisogna creare nella directory di riferimento il file con estensione scss, basta creare un file di testo e modificare l’estensione del file in “.scss” o utilizzare un file CSS già esistente e modificare la sua estensione in “.scss”. Scegli tu il metodo più comodo ma assicurati solo che l’estensione sia veramente quella altrimenti non funzionerà nulla.

scout02

Premi play

Se tutto è stato settato correttamente siamo pronti per selezionare il tab log in alto a destra e infine sul pulsante play. Scout vi restituirà un messaggio di feedback come quello nello screen di seguito e se andrai a vedere nella cartella dedicata al progetto, potrai vedere il nuovo file (vuoto) con estensione .css creato da scout.

scout03

Adesso ci divertiamo

Dopo tanti preparativi è arrivato il momento di buttare a terra un pò di codice CSS basandoci su sintassi SASS per concludere l’articolo con un piccolo esempio concreto. Per prima cosa apri il file .scss creato in precedenza e modificalo con un qualsiasi IDE, inserendo un reset e altre istruzioni che comprenderai facilmente.

@import "compass/reset";

$color: red;
$margin: 20px;
    
body {            
  color: $color;
  margin: $margin;
} 

Hai salvato? Hai notato che scout ha rilevato delle modifiche al file e ha ricompilato il tuo *.css? Aprilo e controlla, all’interno troverai il reset completo di Meyer e alcune delle variabili correttamente valorizzate per il selettore body.

>>> Change detected at 23:34:37 to: stile.scss
overwrite stile.css

Se sbaglio a scrivere? Nessun problema, scout si accorge che qualcosa non va e mostra a video un messaggio di errore relativo alla sintassi errata che hai utilizzato.

“Syntax error: Invalid CSS after “body”: expected selector or at-rule, was “{ ”
on line 6 of /Users/stefano/Desktop/sass/css/stile.scss

1: /Users/stefano/Desktop/sass/css/stile.scss”

Conclusioni

Ovviamente questa è solo la punta dell’iceberg di Sass&Compass, ma questo articolo, più che spiegare sintassi e feature (cosa che potrò fare in un prossimo articolo), voleva essere di aiuto a tutti coloro che hanno poca dimestichezza con il terminale e strani comandi da riga di console. Come in ogni cosa ovviamente c’è sempre il rovescio della medaglia ma sta a te mettere tutto sulla bilancia e valutare se utilizzare quest’app o meno. Facendo piccole ricerche online ho scoperto che per progetti molto grossi scout tende a rallentare un pò. Inoltre se confronti le versioni di Sass e Compass fornite dall’app con quelle che si trovano sui rispettivi siti da scaricare potrai notare un certo disallineamento. L’app non fornisce l’ultimissima versione di entrambi. Ciò significa che non sarai super aggiornato sulle nuove feature e bugfix che Sass e Compass di volta in volta inseriscono. Infine se vai sulla repo ufficiale, c’è la lista di bug segnalati, 94 in totale / 44 risolti.

Molte persone a quanto pare consigliano un’altra applicazione compass.app, disponibile per il download al prezzo di 10$. Non ho avuto modo di provarla, però se qualcuno ha più esperienza in merito, qui di seguito ci sono i commenti. Fatevi avanti, il confronto è sempre gradito.

  • giuliano

    quando fai una guida sulla sintassi sass
    e meglio less o sass

    • Stefano Vollono

      Hai ragione Giuliano, la farò!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github