Utilizzare e compilare i file preprocessore di CSS in Dreamweaver.

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, più ricco di temi e può essere esteso.

Dreamweaver supporta i preprocessori CSS più diffusi, Sass e Less, oltre ai framework Compass e Bourbon per compilare i file Sass.

Less è basato su Javascript e Sass è basato su Ruby, ma non è necessario conoscere questi linguaggi o 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.

Come Dreamweaver gestisce i preprocessori CSS

Come vengono considerati i preprocessori CSS da Dreamweaver varia a seconda se avete definito o meno un sito. Adobe consiglia di definire un sito poiché ciò consente di impostare le preferenze dei preprocessori CSS e di usare i framework Compass e Bourbon da Dreamweaver.

Se avete definito 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.

Quando definite un sito, Dreamweaver consente anche di utilizzare i framework Sass, Compass, Bourbon, Bourbon Neat e Bourbon Bitter da Dreamweaver.

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

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

  1. Definite 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, vedeteInformazioni 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, vedete Compilare i file dei preprocessori CSS.

Impostazione delle preferenze per i preprocessori CSS

Potete impostare le preferenze specifiche per il sito dei preprocessori CSS utilizzando Siti > finestra di dialogo Gestisci siti.

Il mantenimento delle preferenze specifiche per il sito del preprocessore CSS consente di gestire i propri preprocessori CSS in base al sito e consente di controllare ogni singolo preprocessore CSS del sito, senza dover aggiornare le preferenze ogni volta che si passa da un sito all'altro.

Impostare le impostazioni generali dei preprocessori CSS

Potete impostare le seguenti impostazioni generali del preprocessore CSS in Siti > finestra di dialogo Gestisci siti > Preprocessori CSS. 

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

Genera un'unità non rigorosa nel file CSS dopo il calcolo matematico. Ad esempio, 5px * 2px viene compilato come 10px e non come 10px2. 

Se questa opzione è disattivata, quando elabora i calcoli matematici Less tenta di individuare l'unità di output.

In questo esempio, il file CSS viene generato come descritto di seguito:

.class {
  property: 1px * 2px;
}

In questo caso, la stima non è corretta; una lunghezza moltiplicata per una lunghezza fornisce un'area, ma il file CSS non supporta la definizione delle aree. Di seguito, si presume che l'utente volesse impostare uno dei valori come un valore, non come un'unità di lunghezza e l'output di Dreamweaver è 10px.

Con le unità rigorose attivate, questo file CSS generato viene considerato un errore.

Riscrivere URL come URL relativi

Riscrive gli URL nei file importati in modo che l'URL sia sempre relativo al file di base importato. Pertanto, se un file Less importa un altro file Less, che a sua volta fa riferimento a un'immagine, l'URL relativo viene visualizzato nel file CSS compilato.

Generare la 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 avviene la compilazione, 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.

Creare commenti origine

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

Generare la 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 avviene la compilazione, 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.

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

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

Output CSS

Specificare la posizione del file di output CSS generato.

Nella stessa cartella del file di origine

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

Definire la cartella di output

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

Sostituire il 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 origine

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 la compilazione in Impostazioni generali, Dreamweaver attiva automaticamente il preprocessore CSS quando un all'interno di questa cartella viene 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. Pertanto, se si creano i fogli di stile utilizzando Compass, è possibile compilarli e generare i file CSS da Dreamweaver.

  1. Installare i 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 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 sui computer avete già Compass e la configurazione del file *.rb Compass, dalla finestra di dialogo della configurazione del sito di Dreamweaver, specificate il percorso del file *.rb Compass nella cartella principale corrente del sito.

    1. Nella finestra di dialogo Configurazione sito, selezionate Preprocessori CSS > Compass.
    2. Selezionate la casella di controllo per l'utilizzo di Compass.
    3. Fate clic sull'opzione per specificare un file di configurazione basato su Ruby e individuate il percorso del file. 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 scegliere di specificarla manualmente.

    1. Nella finestra di dialogo Configurazione sito, selezionate Preprocessori CSS > Compass.
    2. Selezionate la casella di controllo per l'utilizzo di Compass.
    3. Fate 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. È relativa a project_path.

    Directory delle immagini generate

    La directory in cui sono contenute le immagini generate. È relativa a project_path. Per impostazione predefinita è il valore images_dir.

    Directory dei caratteri

    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 nella finestra di dialogo Siti > Gestisci siti > Preprocessori CSS avete selezionato Attiva compilazione automatica su salvataggio file, 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. Pertanto, se si creano i fogli di stile utilizzando Bourbon, è possibile 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 di Bourbon vengono copiati nel sito e questo diventa il framework utilizzato quando viene attivata la compilazione dei file che importano 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 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 memorizzare il file CSS generato.

  1. Nella finestra di dialogo Configurazione sito, selezionate Preprocessori CSS > opzioni generali > opzione per l'attivazione della compilazione automatica sul salvataggio del file.

    Abilitazione della compilazione automatica
    Abilitazione della compilazione automatica

  2. Nella finestra di dialogo Configurazione sito, selezionate Preprocessori CSS > opzioni di origine e output.

  3. Nella finestra di dialogo di origine e output, specificate la posizione in cui salvare i file CSS generati. Potete scegliere una delle seguenti opzioni:

    Nella stessa cartella del file di origine

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

    Definire la cartella di output

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

    Sostituire il 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 «controllare».

    Se apportate delle modifiche a uno dei file all'interno di questa cartella controllata, 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) e l'icona di stato nella barra di stato diventa di colore verde <icon>. Per aprire il file CSS compilato, potete fare doppio clic sul messaggio di conferma operazione nel pannello.

Se vengono rilevati errori, il file CSS non è stato compilato correttamente, L'icona di stato diventa di colore rosso <icon> 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 è generalmente agganciato alla parte inferiore dell'area di lavoro. Se il pannello dovesse venire chiuso, potete aprirlo da Finestra > Pannello Output.

Potete anche attivare o disattivare il pannello Output (Mostra/Nascondi) utilizzando l'icona di stato quando è di colore 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 per l'attivazione della compilazione automatica sul salvataggio del 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.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online