Sass parte I Pubblicato su (

Transcript

1 Indice Introduzione Installazione Torna su Introduzione Sass, acronimo di Syntactically Awesome Style Sheets, è un linguaggio che estende le funzionalità del normale CSS permettendo l'utilizzo di variabili, funzioni, cicli... Anzichè scrivere files in CSS scriviamo files con estensione.scss che poi vengono compilati risultando in normale codice CSS. Per utilizzare Sass su Windows è necessario prima installare il linguaggio Ruby mentre su Mac e Linux quest'ultimo si trova già installato. Per compilare i files.scss (trasformarli in.css riconoscibili dai browser) si può usare il Prompt dei comandi oppure si può installare una applicazione come Scout oppure Koala o CodeKit. In particolare Scout richiede che siano prima installati Adobe AIR e Java Runtime Environment. Video tutorial sull'installazione di Java su Windows Torna su Installazione Le seguenti istruzioni si riferiscono all'installazione di Sass su Windows (Java RE ed Adobe Air già installati). Cliccare sulle foto per ingrandirle. Per scaricare il linguaggio Ruby su Windows bisogna visitare il sito Rubyinstaller (su macchine Mac e Linux Ruby è già installato). Pagina 1 di 34

2 Scegliere l'installer adatto al proprio sistema operativo (io ho scelto quello a 32 bit). Pagina 2 di 34

3 Selezionare le voci "Add Ruby executables to your PATH" e "Associate.rb and.rbw files with this Ruby installation". Pagina 3 di 34

4 Scaricare anche il Development Kit relativo alla versione di Ruby installata. Pagina 4 di 34

5 Estrarre i files in una cartella a scelta, io ho fatto una cartella denominata DevKit sul disco C. Pagina 5 di 34

6 Aprire il Prompt dei comandi. Automaticamente ci si trova nella cartella dell'utente. Pagina 6 di 34

7 Spostarsi nel disco C digitando il comando cd C:\ e premendo invio. Siamo ora nel disco C. Pagina 7 di 34

8 Spostarsi nella cartella in cui abbiamo estratto i files del DevKit, nel mio caso basta digitare il comando cd DevKit e premere invio. Siamo ora nella cartella giusta. Pagina 8 di 34

9 Digitiamo il comando ruby dk.rb init e premiamo invio. Riceviamo il messaggio "Inizialization complete!". Pagina 9 di 34

10 Digitiamo il comando ruby dk.rb install e premiamo invio. Se tutto è andato bene riceviamo un messaggio simile a quello sottostante. Pagina 10 di 34

11 Digitiamo il comando gem install json --platform =ruby e premiamo invio. Se veniamo bloccati dal Firewall clicchiamo su "Consenti accesso" Pagina 11 di 34

12 Se tutto è andato bene riceviamo un messaggio simile a quello sottostante. Digitiamo il comando gem install sass e premiamo invio. Pagina 12 di 34

13 Se tutto è andato bene riceviamo un messaggio simile a quello sottostante. Ora scarichiamo l'applicazione Scout da questo sito che ci permette di eseguire la compilazione dei files in tempo reale. Pagina 13 di 34

14 Installiamo Scout Pagina 14 di 34

15 L'applicazione si presenta vuota perchè non ci sono ancora files.scss da trasformare in.css. Pagina 15 di 34

16 Creiamo la cartella che conterrà il sito. Io uso Xampp quindi la creo nella cartella "htdocs". Pagina 16 di 34

17 Io l'ho chiamata "sito-sass". Pagina 17 di 34

18 All'interno della cartella principale del sito creiamo il file index.html, la cartella scss che conterrà i files Sass, la cartella css che conterrà i files css compilati da Scout e una cartella per le immagini. Pagina 18 di 34

19 Ora clicchiamo sul + in basso a sinistra nella finestra di Scout per aggiungere il sito all'applicazione. Pagina 19 di 34

20 Pagina 20 di 34

21 La cartella "Input folder" è quella dove inseriremo i files da compilare, quindi la cartella scss. La cartella "Output folder" e quella che conterrà i files compilati quindi la cartella css. Pagina 21 di 34

22 Cliccando sul tasto play avviamo la compilazione automatica che avverrà ad ogni salvataggio del file.scss. Pagina 22 di 34

23 Cliccando sul pulsante "Log" riceviamo dei messaggi sull'andamento della compilazione. Pagina 23 di 34

24 Ora apriamo il file index.html e scriviamo il markup di base. Nell'head inseriamo il link al file main.css che verrà generato da Scout. Pagina 24 di 34

25 Ora creiamo il file main.scss che sarà quello dove inseriremo il codice Sass. Ricordiamoci di chiamare il file.scss con lo stesso nome che abbiamo indicato per il file.css! Proviamo a scrivere qualcosa nel file.scss e salviamolo. Pagina 25 di 34

26 E' possibile che la compilazione non vada a buon fine e che appaia una finestra di Adobe AIR Introspector con il codice di errore ArgumentError: Error #3214. Pagina 26 di 34

27 Per risolvere il problema dobbiamo modificare il file di Scout nel percorso C: > Programmi (x86) (oppure Program Files) > Scout > javascripts > app > process_interaction.js Pagina 27 di 34

28 Per modificare questo file è necessario avviare il nostro editor di testo con i permessi di amministratore. Io uso Sublime Text 2. Pagina 28 di 34

29 La parte che dobbiamo modificare si trova alla fine del file, attorno alla riga 106. Dobbiamo modificare il percorso indicato alla riga 108 con il percorso del file java.exe che abbiamo sul nostro computer. Pagina 29 di 34

30 Dobbiamo anche sostituire il carattere \\ (due backslash) con il carattere / (slash) alle righe 108, 110 e 112. Pagina 30 di 34

31 Ora torniamo al nostro file.scss e salviamo. Il log di Scout ci dice che è andato tutto bene. Pagina 31 di 34

32 Vediamo anche che è stata generata una cartella denominata.sass-cache. Pagina 32 di 34

33 E' stato anche generato il file main.css che contiene all'interno il codice Sass trasformato in CSS. Apriamo la pagina index.html con il browser e verifichiamo che la proprietà CSS è stata Pagina 33 di 34

34 applicata. Torna su Source URL: Pagina 34 di 34