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 preprocessato porta i CSS a un livello più vicino a un linguaggio di programmazione.

Nello specifico, i preprocessori consentono di utilizzare variabili, mixin, funzioni e molte altre tecniche che
non sono possibili nei CSS. Utilizzando i preprocessori CSS, puoi definire tutto una volta e riutilizzarlo ripetutamente, ottenendo CSS gestibili ed estendibili.

Inoltre, utilizzando un preprocessore CSS, il codice CSS creato è più leggibile e semplice da mantenere. Se stai creando siti web che fanno riferimento a numerosi file CSS, l'utilizzo di preprocessori CSS come Sass o Compass può ridurre la codifica manuale e le azioni 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 quando carichi, modifichi o salvi questi 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

Come Dreamweaver gestisce i preprocessori CSS

La gestione dei preprocessori CSS con Dreamweaver varia a seconda se avete definito o meno un sito. Se definisci un sito, puoi configurare le preferenze dei preprocessori CSS e utilizzare anche i framework Compass e Bourbon dall'interno di 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. Puoi anche personalizzare la posizione dei file Sass e CSS e le opzioni del preprocessore specifiche per ciascun sito.

Continua a leggere per scoprire 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 si riflettono anche in tutti i file HTML aperti in cui questo CSS compilato è collegato o allegato.

Ecco un flusso di lavoro di alto livello delle attività coinvolte quando si utilizzano i preprocessori CSS:

• Se desiderate utilizzare Compass o Bourbon in Dreamweaver, installate il compilatore appropriato. La procedura di installazione richiede un solo clic. Imposta 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. Se alcuni mixin o funzioni del framework di authoring vengono rimossi nelle revisioni successive, puoi ancora accedere ai file del preprocessore all'interno del sito.

• Verificate che la compilazione automatica sia attivata. Poi premi Salva per aggiornare i file CSS.
• (Facoltativo) Visualizza le modifiche che si riflettono nella Vista dal vivo o nell'Anteprima in tempo reale in tutte le pagine HTML in cui viene utilizzato il 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, dovevi compilare questi file autonomamente al di fuori dell'applicazione Dreamweaver.
Il flusso di lavoro sarebbe simile ai seguenti passaggi:

1. Scarica e installa un compilatore.
2. Imposta un processo grunt (Gruntfile.js) per consentire al compilatore di leggere il file Sass/LESS/SCSS.
3. Imposta un altro job grunt per compilare il file in CSS, che poi importerai in Dreamweaver.

Devi eseguire questi passaggi ogni volta che apporti una modifica al file Sass/LESS/SCSS.

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 è supportato.

Utilizzo dei preprocessori CSS in Dreamweaver

Ecco un flusso di lavoro di alto livello delle attività da svolgere quando si utilizzano i 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 sull'impostazione di un sito Dreamweaver, consulta Informazioni sui siti 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, consulta Impostazione delle preferenze specifiche del sito per i preprocessori CSS.
3. Se desiderate utilizzare framework specifici, ad esempio Compass o Bourbon, è possibile specificare le impostazioni per questi framework. Per ulteriori informazioni, consulta: Utilizzo del framework Compass o Utilizzo del framework Bourbon.
4. Impostate la compilazione automatica oppure compilate manualmente i file Sass e LESS. Per ulteriori informazioni, consulta Compilazione dei file del preprocessore CSS.

Impostazione delle preferenze per i preprocessori CSS

Puoi impostare preferenze specifiche della sede per i preprocessori CSS utilizzando la finestra di dialogo Sedi > Gestisci sedi.

La possibilità di mantenere preferenze specifiche al sito per il preprocessore CSS, consente di gestire i preprocessori CSS sulla base del sito. Questa azione ti offre anche il controllo sul preprocessore CSS per ogni sito, senza dover aggiornare le preferenze ogni volta che cambi 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 applicabili per il 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 viene lasciata deselezionata, devi compilare manualmente i file ogni volta che apporti una modifica.

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 è disabilitata, tutti i calcoli matematici nel file vengono elaborati.

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

.class {

property: 1px * 2px;

}

In questo caso, la lunghezza moltiplicata per una lunghezza fornisce un'area, ma il file CSS non supporta la definizione delle aree. Dreamweaver presume che l'utente intendesse che uno dei valori fosse un Valore e non un'unità di lunghezza.

Con le unità rigorose attive, Dreamweaver presume che sia un errore di calcolo e genera un errore.

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

Crea una mappa di origine. La source map è un file che colma il divario tra linguaggi di alto livello come Sass e LESS e il linguaggio di basso livello in cui vengono compilati, come CSS.

Opzioni Sass/SCSS

Specifica lo stile del file di output CSS:

• Nidificato - Formatta il CSS compilato nella ben nota struttura modulare.
• Compact - Formatta il CSS compilato in una struttura compatta che occupa meno spazio rispetto a Nested o Expanded.
• Compressed - Restituisce il CSS in una struttura piatta.
• Espanso - Genera il file CSS in una modalità espansa in cui ogni proprietà e ogni regola utilizzano una riga. Le proprietà sono rientrate all'interno delle regole, ma le regole non sono rientrate in alcun modo. 

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

Crea una mappa dell'origine (file che colma il divario tra linguaggi di alto livello come Sass e LESS e il linguaggio di basso livello in cui vengono compilati, come CSS). 

Impostazione delle preferenze di origine e output di CSS

Puoi definire dove devono essere posizionati i file CSS generati e il percorso che Dreamweaver deve monitorare e attivare per la compilazione automatica quando un file Sass/LESS nel percorso viene modificato utilizzando un editor esterno.

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

Output CSS

Specifica la posizione del file CSS di output che viene generato.

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

Seleziona questa opzione e specifica 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, impostando Da: scss e A: css, il file di output viene posizionato all'interno della stessa struttura ad albero dopo aver sostituito SCSS nel percorso con css.

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

Se avete attivato Compilazione in Impostazioni generali, Dreamweaver attiva automaticamente il preprocessore CSS. Dreamweaver attiva la compilazione automatica quando qualsiasi file all'interno della cartella viene modificato esternamente o da Dreamweaver.

Uso del framework Compass

Compass è un framework open source per l'authoring CSS che consente di creare fogli di stile CSS3 utilizzando Sass.

Dreamweaver offre il supporto per Compass. Se crei fogli di stile utilizzando Compass, puoi compilare questi fogli di stile e generare file CSS da Dreamweaver.

Uso del framework Bourbon

Dreamweaver supporta la famiglia dei prodotti Bourbon. Se crei fogli di stile utilizzando Bourbon, puoi compilare questi fogli di stile e generare file CSS da Dreamweaver.

Sono supportate le seguenti versioni di Bourbon:

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

Puoi importare il framework Bourbon aggiungendo una delle seguenti nel codice:

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

Dreamweaver usa quindi la versione preconfezionata di Bourbon durante la compilazione dei file di 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 usato quando viene attivata la compilazione per qualsiasi file che importa il framework.

Installare i file Bourbon, Bourbon Neat o Bourbon Bitters

Per installare Bourbon o una delle sue versioni:

Compilare i file dei preprocessori CSS

Puoi compilare i file di preprocessore CSS in uno dei seguenti modi:

• Impostare la compilazione automatica dei file dei preprocessori CSS
• Compila manualmente un file di preprocessore 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. Puoi anche specificare le posizioni (all'interno della radice del sito) in cui salvare i CSS generati.

Dopo una compilazione riuscita, viene visualizzato un messaggio nel pannello Output (Finestra > Risultati > Output). L'icona di stato nella barra di stato viene visualizzata in verde. Per aprire il CSS compilato, fai doppio clic sul messaggio di successo 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 viene compilato correttamente solo dopo aver risolto 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 pagina web viene aggiornata automaticamente in Vista dal vivo.

Per ulteriori informazioni sul collegamento della pagina web al foglio di stile, consulta Collegare a un foglio di stile CSS esterno.

Compilare manualmente un file dei preprocessori CSS

In alcune situazioni (ad esempio se non hai definito un sito Dreamweaver), potresti voler compilare manualmente un file preprocessore CSS.

In questi scenari, disabilita Abilita compilazione automatica al salvataggio del file nel pannello Preprocessori CSS > Generale della finestra di dialogo Configurazione sede.

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

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