Utilizzare i preprocessori CSS in Dreamweaver

CSS è un linguaggio che descrive lo stile di un documento HTML. I preprocessori CSS compilano codice scritto in un linguaggio pre-elaborato per CSS. Il linguaggio pre-elaborato rende CSS più simile a un linguaggio di programmazione.

In particolare, questi preprocessori consentono di utilizzare variabili, mix-in, funzioni e molti altri elementi
solitamente non disponibili in CSS. Utilizzando i preprocessori CSS è possibile definire tutti gli elementi in una sola volta per poterli riutilizzare in un secondo momento; in questo modo CSS è più semplice da gestire e può essere esteso.

Inoltre, utilizzando un preprocessore CSS, il codice CSS creato è più leggibile e semplice da mantenere. Se i siti Web che state creando fanno riferimento a diversi file CSS, l’utilizzo di preprocessori CSS come Sass o Compass, consente di ridurre le operazioni manuali di codifica e di copia/incolla.

Per la compilazione di file SCSS, LESS, Dreamweaver utilizza un compilatore Ruby-Saas incorporato. Dreamweaver supporta anche i framework Compass e Bourbon per la compilazione di file Sass. 

LESS è basato su JavaScript mentre Sass è basato su Ruby. Non è tuttavia richiesta una conoscenza di questi due linguaggi. E non dovete neppure utilizzare la riga di comando per compilare i file in CSS. Dreamweaver compila automaticamente questi file in CSS utilizzando la libreria JavaScript less.js durante il caricamento, la modifica o il salvataggio dei file.

Versioni supportate:

• Sass: 3.4.25
• LESS: 2.7.2
• Compass: 1.0.3
• Bourbon: 4.2.6
• Bourbon Neat: 1.7.3
• Bourbon Bitters: 1.2.0

La gestione dei preprocessori CSS con Dreamweaver varia a seconda se avete definito o meno un sito. Se definite un sito, potete impostare le preferenze del preprocessore CSS e usare i framework Compass and Bourbon da Dreamweaver.

Quando definite un sito, potete personalizzare il modo in cui i preprocessori CSS operano in Dreamweaver impostando le preferenze specifiche per il sito del preprocessore CSS. L'impostazione delle preferenze specifiche per il sito del preprocessore CSS consente di specificare le opzioni di compilazione in base al sito. Potete inoltre personalizzare la posizione di Sass e dei file CSS e le opzioni del preprocessore specifiche per ogni sito.

Continuate a leggere per apprendere come utilizzare Dreamweaver con i preprocessori CSS:

Dreamweaver 2017 e preprocessori CSS

In Dreamweaver 2017, il supporto per i preprocessori CSS è integrato in Dreamweaver. In altre parole, potete utilizzare i file di Sass/LESS/SCSS in Dreamweaver. Per compilare automaticamente il codice CSS in Dreamweaver, è sufficiente premere Ctrl + S o Comando + S. Potete inoltre compilare manualmente i singoli file CSS selezionando Strumenti > Compila (o premendo F9). Le modifiche sono riportate anche in tutti i file HTML aperti in cui è collegato o associato questo codice CSS compilato.

Di seguito è presentato un flusso di lavoro ad alto livello relativo all'utilizzo dei preprocessori CSS:

• Se desiderate utilizzare Compass o Bourbon in Dreamweaver, installate il compilatore appropriato. La procedura di installazione richiede un solo clic. Configurate le impostazioni del preprocessore CSS.

Installate il compilatore solo se desiderate una copia dei file del framework (Bourbon) oppure se desiderate generare i file SCSS e i file di configurazione basati su Ruby (Compass) predefiniti. Si consiglia di conservare una copia dei file del framework. In caso di rimozione dalle versioni successive di alcuni mixin o funzioni del framework di creazione, potete comunque accedere ai file del preprocessore dal sito.

• Verificate che la compilazione automatica sia attivata. Premete quindi Salva per aggiornare i file CSS.
• (Facoltativo) Osservate nella vista Dal vivo o nell’Anteprima in tempo reale come le modifiche si riflettono in tutte le pagine HTML in cui è utilizzato il codice CSS generato.

Dreamweaver 2015 e preprocessori CSS

In Dreamweaver 2015 e nelle versioni CC precedenti, potevate utilizzare i file Sass, LESS e SCSS con Dreamweaver. Tuttavia, la compilazione avveniva manualmente ed esternamente a Dreamweaver.
Il flusso di lavoro utilizzato è riassunto nei seguenti passaggi:

1. Scaricate e installate il compilatore.
2. Configurate un processo grunt (Gruntfile.js) per il compilatore per leggere il file Sass/LESS/SCSS.
3. Configurate un altro processo grunt per compilare il file in CSS, da inserire poi in Dreamweaver.

Ogni volta che modificate il file Sass/LESS/SCSS, dovrete eseguire questi passaggi.

Se non avete definito un sito, potete scegliere di compilare manualmente i file Sass e LESS. Tuttavia il supporto dei framework Compass e Bourbon non è disponibile.

Utilizzo dei preprocessori CSS in Dreamweaver

Di seguito è presentato un flusso di lavoro ad alto livello relativo all'utilizzo dei preprocessori CSS:

1. Definire un sito in Dreamweaver. Assicuratevi che il file Sass o LESS che state cercando di compilare sia incluso nella cartella principale del sito. Se avete già definito un sito e il file Sass/LESS è incluso nella cartella principale del sito, procedete con il passaggio successivo. Per ulteriori informazioni sulla configurazione di un nuovo sito Dreamweaver, consultate Informazioni sui siti di Dreamweaver.
2. Impostate le preferenze per i preprocessori CSS (come la definizione della posizione dei file CSS generati). Queste preferenze sono specifiche per il sito. Per ulteriori informazioni, consultate Impostazione delle preferenze specifiche per il sito del preprocessore CSS.
3. Se desiderate utilizzare framework specifici, ad esempio Compass o Bourbon, è possibile specificare le impostazioni per questi framework. Per ulteriori informazioni, consultate: Uso del framework Compass o Uso del framework Bourbon.
4. Impostate la compilazione automatica oppure compilate manualmente i file Sass e LESS. Per ulteriori informazioni, consultate Compilare i file dei preprocessori CSS.

Impostazione delle preferenze per i preprocessori CSS

Potete impostare le preferenze specifiche al sito per i preprocessori CSS nella finestra di dialogo visualizzata selezionando Siti > Gestisci siti.

La possibilità di mantenere preferenze specifiche al sito per il preprocessore CSS, consente di gestire i preprocessori CSS sulla base del sito. Questa operazione consente inoltre di controllare il preprocessor CSS per ciascun sito, senza dover aggiornare le preferenze a ogni cambio di sito.

Impostare le impostazioni generali dei preprocessori CSS

Potete impostare le seguenti impostazioni generali del preprocessore CSS nella finestra di dialogo Siti > Gestisci siti > Preprocessori CSS. Per impostazione predefinita, queste impostazioni sono pertinenti al framework Saas.

Selezionate questa casella di controllo per abilitare la compilazione automatica dei preprocessori CSS. Se selezionate questa opzione, quando salvate il file Sass, LESS o SCSS, Dreamweaver genera automaticamente un file CSS. Se questa opzione non è selezionata, dovrete compilare manualmente questi file ogni volta che li modificate.

Opzioni LESS

Elabora solo i calcoli matematici tra parentesi. Ad esempio, (100px/25px) viene elaborato correttamente, mentre 20% + 10% (senza parentesi) non viene elaborato. Quando questa opzione è disattivata, vengono elaborati tutti i calcoli matematici nel file.

Senza questa opzione, LESS tenta di individuare l'unità di output quando elabora i calcoli matematici. Ad esempio:

In questo caso, la lunghezza moltiplicata per una lunghezza fornisce un'area, ma il file CSS non supporta la definizione delle aree. Per cui Dreamweaver considera uno degli elementi come valore e non come un'unità di lunghezza.

Con le unità rigorose attivate, Dreamweaver considera questo un errore di calcolo e genera un errore.

Questa opzione consente di riscrive gli URL nel file CSS generato in modo che siano sempre relativi al file generato. 

Crea una mappa di origine. La mappa di origine è un file che unisce i linguaggi di alto livello come Sass e LESS e il linguaggio di livello inferiore in cui sono compilati, ad esempio CSS.

Opzioni Sass/SCSS

Consente di specificare lo stile del file di output CSS:

• Nidificato - Formatta il file CSS compilato nella nota struttura modulare.
• Compatto - Formatta il file CSS compilato in una struttura compatta che occupa meno spazio di Nidificato o Espanso.
• Compresso - Genera il file CSS in una struttura senza gerarchia.
• Espanso - Genera il file CSS in una modalità espansa in cui ogni proprietà e ogni regola utilizzano una riga. Le proprietà sono rientrate rispetto alle regole, ma le regole non sono rientrate in alcun modo.

Crea commenti nel file di output CSS che associano il codice CSS alla riga da cui è stato generato.

Viene creata una mappa di origine (un file che funge da raccordo tra i linguaggi di alto livello come Sass e LESS e il linguaggio di livello inferiore in cui sono compilati, ad esempio CSS). 

Impostazione delle preferenze di origine e output di CSS

È possibile definire il punto in cui devono essere inseriti i file CSS generati e il percorso in cui Dreamweaver deve selezionare e attivare la compilazione automatica quando un file Sass/LESS nel percorso viene modificato utilizzando un editor esterno.

Potete impostare le seguenti impostazioni di origine e di output del preprocessore di CSS nella finestra di dialogo Siti > Gestisci siti.

Output CSS

Specificare la posizione del file di output CSS generato.

Selezionate questa opzione se desiderate che i file CSS generati vengano salvati nella stessa cartella dei file Sass e LESS di origine.

Selezionate questa opzione e specificate una cartella in cui salvare i file CSS generati.

Questa opzione consente di sostituire una parte del percorso utilizzando le stringhe Da e A. Ad esempio, nell'impostazione Da: scss e A: css, il file di output viene inserito all'interno della stessa struttura ad albero dopo la sostituzione di SCSS nel percorso css.

Specificate la sottocartella all'interno della cartella principale del sito che deve essere selezionata. Generalmente, questa sottocartella contiene tutti i file SCSS o LESS file.

Se avete attivato Compilazione in Impostazioni generali, Dreamweaver attiva automaticamente il preprocessore CSS. Dreamweaver attiva la compilazione automatica quando un file nella cartella è modificato esternamente o da Dreamweaver.

Uso del framework Compass

Compass è un framework open-source per la creazione di file CSS permette di creare fogli di stile CSS3 utilizzando Sass.

Dreamweaver offre il supporto per Compass. Se create i fogli di stile utilizzando Compass, potete compilarli e generare i file CSS da Dreamweaver.

Uso del framework Bourbon

Dreamweaver supporta la famiglia dei prodotti Bourbon. Se create i fogli di stile utilizzando Bourbon, potete compilarli e generare i file CSS da Dreamweaver.

Sono supportati i seguenti tipi di Bourbon:

• Bourbon - Una libreria semplice e leggera per Sass
• Bourbon Neat - un framework a griglia semantico leggero per Sass e Bourbon
• Bourbon Bitters - stile della struttura, variabili e struttura per progetti

Potete importare il framework di Bourbon aggiungendo una delle seguenti opzioni nel codice:

• @import “bourbon” - per importare Bourbon
• @import “neat” - per importare Bourbon Neat
• @import “base” - per importare Bourbon Bitter

Dreamweaver utilizza quindi la versione integrata di Bourbon durante la compilazione dei file del preprocessore.

In alternativa, è possibile installare i file del framework di Bourbon nel sito in modo che gli ulteriori aggiornamenti a Dreamweaver non influiscano sui flussi di lavoro di compilazione. I file del framework Bourbon sono copiati nel sito. Bourbon è il framework utilizzato quando la compilazione è attivata per qualsiasi file che importa il framework.

Installare i file Bourbon, Bourbon Neat o Bourbon Bitters

Per installare Bourbon o una delle sue varianti:

Compilare i file dei preprocessori CSS

È possibile compilare i file dei preprocessori CSS in uno dei seguenti modi:

• Impostare la compilazione automatica dei file dei preprocessori CSS
• Compilare manualmente un file dei preprocessori CSS

Impostare la compilazione automatica dei file dei preprocessori CSS

Potete impostare le opzioni in Dreamweaver per la compilazione automatica delle modifiche in un file Sass o LESS nel file CSS equivalente. Potete anche specificare le posizioni (all'interno della cartella principale del sito) in cui desiderate salvare il file CSS generato.

Dopo la compilazione, se l'esito è positivo viene visualizzato un messaggio nel pannello Output (Finestra > Risultati > Output). L'icona di stato nella barra di stato diventa di colore verde. Per aprire il file CSS compilato, fate doppio clic sul messaggio di conferma operazione nel pannello.

Se vengono rilevati errori, il file CSS non è compilato correttamente, L'icona di stato diventa di colore rosso e nel pannello Output vengono elencati gli errori e gli avvisi. Potete fare doppio clic su un messaggio di errore nel pannello per passare rapidamente alla riga di codice contenente l'errore. Il file CSS non viene compilato finché non vengono risolti tutti gli errori.

Dopo la compilazione del file CSS, potete collegare la vostra pagina Web al foglio di stile. Quando apportate modifiche ai preprocessori CSS, i file CSS compilati corrispondenti vengono aggiornati automaticamente. Anche la relativa pagina Web viene aggiornata automaticamente in tempo reale nella vista Dal vivo.

Per ulteriori informazioni sulla connessione della pagina Web al foglio di stile, vedeteCollegare un foglio di stile CSS esterno.

Compilare manualmente un file dei preprocessori CSS

In alcuni casi (ad esempio, se non è stato definito un sito Dreamweaver), è possibile compilare manualmente un file preprocessore CSS.

In questi casi, disattivate l'opzione Attiva compilazione automatica su salvataggio file nel pannello Preprocessori CSS > Generali della finestra di dialogo Configurazione sito.

Per compilare manualmente un preprocessore CSS, fate clic con il pulsante destro del mouse sul file nel pannello File e selezionate Compila.

Potete anche fare clic su Strumenti > Compila per compilare il file corrente.