J4.x:SCSS e Sass
From Joomla! Documentation
La maggior parte dei fogli di stile predefiniti di Joomla 4.x sono scritti usando SCSS e quindi compilati per generare il CSS File.
Dove puoi trovare i fogli di stile e il compilatore .scss?
I file .scss di base si trovano in directory diverse. In particolare, questi sono questi fileː
- templates/cassiopeia/scss/template.scss
- administrator/templates/atum/scss/bootstrap.scss
- administrator/templates/atum/scss/font-awesome.scss
- administrator/templates/atum/scss/template.scss
- administrator/templates/atum/scss/template-rtl.scss
- media/plg_installer_webinstaller/scss/client.scss
Lo script di generazione CSS, il compilatore SCSS e altri strumenti di compilazione simili si trovano nella directory build/ della fonte Joomlaǃ situata su GitHub. Fare riferimento a Git for Coders per ulteriori informazioni sull'uso di GitHub. La directory di build è disponibile solo dalla fonte Joomlaǃ, non è inclusa in una versione ufficiale di Joomlaǃ.
Prerequisiti
La compilazione dei tuoi file SCSS con il core di Joomlaǃ richiede che nel tuo computer locale sia installato Node.js. Per installare Node.js, visitare il sito Web ufficiale Node.js, scaricare la relativa configurazione per il proprio sistema operativo e installarla seguendo la procedura guidata di installazione. NPM (Node Package Manager) viene utilizzato per gestire e configurare l'ambiente di test JavaScript.
Installa dipendenze (pacchetti)
Apri una riga di comando e vai alla directory principale di Joomla 4.x.
Esegui comando npm install
$ npm install
...
added 1354 packages in 193.687s
$
Ciò installerà tutte le dipendenze nella directory /node_modules. Se non esiste una cartella /node_modules, una cartella verrà automaticamente creata da npm. Va bene, se vedi alcuni avvisi, ma non dovresti vedere un messaggio di errore.
Come rigenerare i fogli di stile CSS
Per rigenerare tutti i file CSS da una distribuzione core di Joomlaǃ, dovrai eseguire gli script di generazione come CLI application.
Tutti i file scss di Joomla! core
Puoi compilare tutti i file css core di Joomlaǃ con il comando node build --compile cs . Per esempio
$ npm run build:css Prefixing for: last 1 version Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning. template.css was updated. Prefixing for: last 1 version template-rtl.css was updated. Prefixing for: last 1 version font-awesome.css was updated. Prefixing for: last 1 version client.css was updated. Prefixing for: last 1 version bootstrap.css was updated. Prefixing for: last 1 version template.css was updated. $
Tutti i file in una directory
Puoi compilare tutti i file in una directory con il comando nodo build - directory di percorso compilata. Ad esempioː build del nodo --compilecss templates/cassiopeia/scss.
$ node build --compile-css templates/cassiopeia/scss Prefixing for: last 1 version Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning. template.css was updated.
Un file speciale
Puoi compilare un file con il comando nodo build --compilecss pathtofile. Ad esempioː build del nodo --compilecss templates/cassiopeia/scss / template.scss.
$ node build --compile-css templates/cassiopeia/scss/template.scss Prefixing for: last 1 version Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning. template.css was updated.
Noteː
- L'estensione del file .scss deve essere minuscola.
- È necessario creare il file css.
Compilare i tuoi file SCSS per il tuo modello
Per compilare i file scss per il tuo modello, dovrai prendere una copia dello script JOOMLA4/build/build-modules-js/compilecescss.js e adattarlo al tuo ambiente.
In alternativa è possibile utilizzare un plug-in del compilatore SCSS che compila automaticamente i file .scss al ricaricamento della pagina. Nella Joomlaǃ Extension Directory JED troverai un plugin per questo scopoː Directory Extensione Joomlaǃ
Altre alternative e strumenti che puoi trovare su http://sass-lang.com/install
Il compilatore SCSS utilizzato per il core Joomlaǃ 4.x è node-sass. Nel core di Joomla puoi trovarlo nella directory JOOMLA4/ node_modules/node-sass.
Differenze CSS, SCSS and Sass
SCSS o Sass semplifica la notazione CSS e definisce le variabili. Ciò garantisce una presentazione più chiara, meno codice e una revisione più semplice attraverso l'uso di variabili.
CSS
Con CSS scriviamo il codice come sotto in figura interaː
#header {
margin: 0;
border: 1px solid blue;
}
#header p {
font-size: 14px;
color: blue;
}
#header a {
text-decoration: none;
}
Sass
Sass è un preprocessore CSS con miglioramenti della sintassi. I fogli di stile nella sintassi estesa vengono elaborati dal preprocessore e convertiti in normali fogli di stile CSS.
Sono disponibili due sintassi per Sassː SCSS e Sass.
SCSS
SCSS è usato nel core di Joomlaǃ. SCSS è un'estensione della sintassi del CSS.
$color: blue;
#header {
margin: 0;
border: 1px solid $color;
p {
color: $colorRed;
font: {
size: 14px;
}
}
a {
text-decoration: none;
}
}
Sass
La vecchia sintassi Sass fornisce un modo più conciso di scrivere CSS.
$color: blue
#header
margin: 0
border: 1px solid $color
p
color: $colorRed
font:
size: 14px
a
text-decoration: none
Ulteriori informazioni sono disponibili nella Documentazione Sass.
Dai CSS esistenti ai file SCSS / import CSS
Potresti voler aggiungere i tuoi file e classi CSS esistenti al tuo modello Cassiopeia basato su SCSS o iniziare con quello che hai. Tutte le dichiarazioni CSS sono compatibili con SCSS, quindi puoi semplicemente rinominare i tuoi file .css in .scss e puoi compilarli e usarli. È quindi possibile utilizzare le funzionalità che SCSS ha da offrire passo dopo passo:
- Estensioni di lingua come variabili, nidificazione e mixin
- Molte funzioni utili per manipolare i colori e altri valori
- Funzionalità avanzate come le direttive di controllo per le librerie
- Output ben formattato e personalizzabile
Vedere https://sass-lang.com/
Avviso: se vuoi personalizzare il modello Cassiopeia è una buona idea copiare il modello e personalizzarlo in seguito, in modo che Joomla! gli aggiornamenti non sovrascrivono le personalizzazioni.
Importa i tuoi .css come file .scss
Ora supponiamo che tu voglia includere i tuoi file personalizzati e farli analizzare dal compilatore SCSS - NON devi riscrivere i tuoi .css in SCSS perché anche il semplice .css funziona. L'unica cosa che devi fare è
- per rinominare i tuoi file .css in .scss e
- prefisso con _ e
- aggiungi un'istruzione @import nei template/cassiopeia/scss/template.scss principali sopra menzionati
Presumo che tu abbia inserito il tuo file mystyles.css personalizzato rinominato in mystyles.scss nella cartella /templates/cassiopeia/scss. Ora apri /templates/cassiopeia/scss/template.scss e nella parte inferiore del file il tuo mystyles.scss file in modo da sovrascrivere le dichiarazioni esistenti:
// Bootstrap functions
@import "../../../media/vendor/bootstrap/scss/functions";
// Variables
@import "variables";
// Flying Focus
@import "../../../media/vendor/flying-focus-a11y/scss/flying-focus";
// Bootstrap
@import "../../../media/vendor/bootstrap/scss/variables";
@import "../../../media/vendor/bootstrap/scss/bootstrap";
// FontAwesome
@import "../../../media/vendor/font-awesome/scss/font-awesome";
// B/C for Icomoon
@import "../../../media/system/scss/icomoon";
// Alert
@import "../../../media/system/scss/jalert";
// Blocks
@import "blocks/global"; // Leave this first
@import "blocks/alerts";
@import "blocks/banner";
@import "blocks/demo-styling";
@import "blocks/footer";
@import "blocks/form";
@import "blocks/frontend-edit";
@import "blocks/header";
@import "blocks/icons";
@import "blocks/iframe";
@import "blocks/layout";
@import "blocks/modals";
@import "blocks/modifiers";
@import "blocks/utilities";
@import "blocks/css-grid"; // Last to allow fallback
// Vendor overrides
@import "vendor/awesomplete";
@import "vendor/bootstrap/buttons";
@import "vendor/bootstrap/card";
@import "vendor/bootstrap/custom-forms";
@import "vendor/bootstrap/collapse";
@import "vendor/bootstrap/dropdown";
@import "vendor/bootstrap/lists";
@import "vendor/bootstrap/modal";
@import "vendor/bootstrap/nav";
@import "vendor/bootstrap/pagination";
@import "vendor/bootstrap/table";
@import "vendor/chosen";
@import "vendor/dragula";
@import "vendor/minicolors";
@import "vendor/tinymce";
@import "mystyles";
Se ora compili il tuo file template.scss principale, finirai con un template.css principale ottimizzato e minimizzato. Hai anche ridotto le tue richieste http e il sito dovrebbe essere caricato più velocemente.