Utilizzare i preprocessori CSS in Dreamweaver

Scoprite come utilizzare e compilare i file del preprocessore 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

Come Dreamweaver gestisce i preprocessori CSS

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.

Nota:

Guardate questa esercitazione video per scoprire come migliorare il codice CSS utilizzando i preprocessori.

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.

Nota:

Per impostazione predefinita, le impostazioni nelle sezioni secondarie Generale e Origine e output sono pertinenti al framework Ruby-Saas. 

Per impostare le preferenze per Compass, dovete selezionare la casella di controllo Usa Compass nella sezione Compass

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.

Impostazioni generali dei preprocessori CSS
Impostazioni generali dei preprocessori CSS

Attivare la compilazione automatica sul salvataggio del file

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

Attiva calcoli rigorosi

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.

Attiva unità rigorose

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

Riscrivi URL come URL relativi

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

Genera mappa di origine

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

Stile file di output

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 origine

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

Genera mappa di origine

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.

Nota:

Per impostazione predefinita, le opzioni nella sezione Origine e output sono pertinenti a Saas. Per attivare queste opzioni per Compass, dovete selezionare la casella di controllo Usa Compass nella sezione Compass.

Dopo aver modificato queste impostazioni e installato Compass, tutte le impostazioni sono migrate in config.rb. Successivamente, se desiderate modificare una qualsiasi impostazione, modificate direttamente le impostazioni nel file config.rb. Inoltre, le modifiche apportate nella finestra di dialogo Impostazioni sito non influiscono sulla compilazione.

Impostazioni Origine e output per Compass
Impostazioni Origine e output per Compass

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

Impostazioni di origine e di output del preprocessore CSS
Impostazioni di origine e di output del preprocessore CSS

Output CSS

Specificare la posizione del file di output CSS generato.

Nella stessa cartella sorgente

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

Definisci cartella di output

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

Sostituisci segmento del percorso di input

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.

Cartella sorgente

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.

  1. Uso dei file Compass.

    Se Compass non è già installato, è possibile installarlo da Dreamweaver.

    Nella finestra di dialogo Configurazione sito, selezionate Preprocessori CSS > Compass. Selezionate Usa Compass, quindi fate clic su Installa i file.

    Installazione dei file Compass
    Installazione dei file Compass

    Tutti i file Compass e il file di configurazione *.rb vengono installati nella cartella del sito ed è possibile visualizzarli nel pannello File.

    File Compass installati
    File Compass installati

  2. Specificare un file di configurazione basato su Ruby esistente

    Se nel computer è già installato Compass e il file di configurazione *.rb di Compass è disponibile, dalla finestra di dialogo Configurazione sito di Dreamweaver, specificate il percorso del file *.rb di Compass all’interno della cartella principale del sito corrente.

    1. Nella finestra di dialogo Configurazione sito, selezionate Preprocessori CSS > Compass.
    2. Selezionate la casella di controllo Usa Compass.
    3. Fate clic su Specifica file di configurazione basato su Ruby e sfogliate nel percorso del file. 
    4. Al termine, fate clic su Salva.
    Specificare un file di configurazione basato su Ruby esistente
    Specificare un file di configurazione basato su Ruby esistente

    Nota:

    il file si deve trovare nella cartella principale del sito.

  3. Specificare manualmente le opzioni di configurazione

    Se non disponete di una configurazione esistente, potete specificarle manualmente.

    1. Nella finestra di dialogo Configurazione sito, selezionate Preprocessori CSS > Compass.
    2. Selezionate la casella di controllo Usa Compass.
    3. Fare clic su Specifica manualmente opzioni di configurazione. Specificate le seguenti opzioni di configurazione, quindi fate clic su Salva.

    I seguenti campi vengono popolati automaticamente, ma potete modificarli in base alle esigenze:

    Nota:

    tutti i percorsi selezionati in queste opzioni devono essere all'interno della cartella principale del sito.

    Percorso HTTP

    Il percorso del progetto quando è in esecuzione nel server web. Il valore predefinito è "/".

    Directory immagini

    La directory in cui sono contenute le immagini. La directory è relativa a project_path.

    Directory immagini generate

    La directory in cui sono contenute le immagini generate. Questa directory è relativa a project_path e il valore predefinito è quello di images_dir.

    Directory font

    La directory in cui sono contenuti i file dei caratteri.

    Risorse relative

    Indica se le funzioni di supporto di Compass devono generare gli URL relativi del file CSS generato nelle risorse o gli URL assoluti utilizzando il percorso HTTP per quel particolare tipo di risorsa.

  4. Se avete selezionato Attiva compilazione automatica su salvataggio file nella finestra di dialogo Siti > Gestisci siti > Preprocessori CSS, Dreamweaver genera un file CSS ogni volta che salvare le modifiche al file Sass.

    Le modifiche possono anche essere visualizzate in tempo reale nella finestra del browser. Per ulteriori informazioni sull'anteprima in tempo reale delle modifiche nel browser, consultate Anteprima in tempo reale.

    Se non desiderate che la compilazione del file CSS avvenga automaticamente, potete effettuarla manualmente effettuando una delle seguenti operazioni:

    • Fate clic con il pulsante destro del mouse sul file Sass, LESS o SCSS nel pannello File, quindi fate clic su Compila
    • Fate clic su Strumenti > Compila per compilare il file corrente.
  5. Potete quindi collegare il file CSS compilato ai file HTML nel sito. Per ulteriori informazioni, consultate Collegare un foglio di stile CSS esterno.

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:

  1. Nella finestra di dialogo Configurazione sito, selezionate Preprocessori CSS > Bourbon, Bourbon Neat o Bourbon Bitters.

  2. Fate clic su Installa i file per installare i file nella posizione specificata per la cartella principale del sito.

    Installazione dei file di Bourbon
    Installazione dei file di Bourbon

    Tutti i file di Bourbon sono installati nella cartella del sito e vengono visualizzati nel pannello File.

    File Bourbon installati
    File Bourbon installati

    Se si verifica un problema, gli errori vengono visualizzati nel pannello Output (Finestra > Risultati > Output) e l'icona della barra di stato diventa di colore rosso.

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

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.

  1. Nella finestra di dialogo Configurazione sito, selezionate Preprocessori CSS > Generali > Attiva compilazione automatica su salvataggio file.

    Attivazione della compilazione automatica
    Attivazione della compilazione automatica

  2. Fate clic su Preprocessori CSS > Origine e output.

  3. Specificate le posizioni in cui salvare i file CSS generati. Potete scegliere una delle seguenti opzioni:

    Nella stessa cartella sorgente

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

    Definisci cartella di output

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

    Sostituisci segmento del percorso di input

    Questa opzione consente di sostituire una parte del percorso utilizzando le stringhe Da e A.

  4. Specificate la cartella contenente il file Sass o LESS che Dreamweaver deve monitorare. 

    Se apportate delle modifiche a uno dei file all'interno della cartella monitorata, Dreamweaver compila automaticamente i file dopo il salvataggio. 

    Impostazioni di origine e di output del preprocessore CSS
    Impostazioni di origine e di output del preprocessore CSS

    Nota:

    Dreamweaver controlla e compila questi file anche se vengono apportate modifiche fuori da Dreamweaver (usando ad esempio un editor di testo).

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.

Nota:

Il pannello Output è agganciato alla parte inferiore dell'area di lavoro. Se il pannello è chiuso, selezionate Finestra > Pannello Output.

Potete anche attivare o disattivare il pannello Output (Mostra/Nascondi) utilizzando l'icona di stato quando lo stato è rosso.

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.

Compilazione manuale dei file del preprocessore CSS attraverso il pannello File
Compilazione manuale dei file del preprocessore CSS attraverso il pannello File

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

Logo Adobe

Accedi al tuo account