Condivisione della tecnologia

concetti e utilizzo di scss

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Sommario

cos'è scss

Confronto tra scss e css

Utilizzo di scss

dichiarare variabili

Differenziare le variabili predefinite

Distinguere tra variabili globali e variabili locali

Sintassi nidificata

Annidamento del selettore

nidificazione di base

Riferimento del selettore principale nidificato (&)

Considerazioni sulla nidificazione

annidato annidato

Nidificazione di proprietà

Nidificazione degli attributi di base

Considerazioni sulla nidificazione

ereditare

Utilizzo di base

Note sull'ereditarietà

Scenari applicativi

Segnaposto%

definire il segnaposto

segnaposto di eredità

Vantaggi e scenari applicabili

Precauzioni

Mescola @mixin

Definire la miscela

chiamata mix

esempio

Vantaggi e scenari applicabili

Precauzioni

SCSS utilizza istruzioni condizionali

@if istruzione

Istruzioni @else e @else if

Annidamento di istruzioni condizionali

Insomma

Tre tipi di loop in SCSS

@for ciclo

@ogni ciclo

@ciclo while

Riassumere

Funzioni e utilizzo personalizzati

Definire funzioni personalizzate

Utilizza funzioni personalizzate

Precauzioni

Compiti a casa

cos'è scss

SCSS (Sassy CSS) è un linguaggio preprocessore per CSS Fornisce più funzioni e flessibilità basate su CSS, rendendo la scrittura e la gestione dei fogli di stile più efficienti e convenienti.

Ecco alcuni vantaggi di SCSS:

  • Variabili: SCSS consente l'uso di variabili per memorizzare valori come colori, dimensioni dei caratteri, ecc., rendendo più conveniente e gestibile la regolazione uniforme di questi valori in tutto il foglio di stile.
  • Regole nidificate: le regole nidificate possono essere utilizzate in SCSS per organizzare gli stili per rendere più chiara la struttura del codice. Ad esempio, puoi scrivere lo stile della pseudo-classe di un elemento nel blocco di stile del suo elemento genitore invece di scriverlo in più posti.
  • Mixin: i mixin sono un modo per combinare un insieme di proprietà di stile in un blocco riutilizzabile. Ciò evita di scrivere ripetutamente lo stesso codice di stile e migliora la riusabilità e la leggibilità del codice.
  • Importa (importazioni in linea): più file SCSS possono essere uniti in un unico file tramite la regola @import. Questo approccio aiuta a dividere il foglio di stile in unità logiche e può essere organizzato e gestito in modo flessibile secondo necessità.
  • Ereditarietà (Extend): SCSS supporta l'ereditarietà dello stile tramite la parola chiave @extend, che può rendere il foglio di stile più modulare e gestibile.
  • Operazioni: SCSS consente operazioni matematiche nei fogli di stile, come addizione, sottrazione, moltiplicazione e divisione, il che è utile per gestire alcuni calcoli di stile dinamico.
  • Modularità: le caratteristiche di SCSS rendono i fogli di stile più modulari e strutturati, in grado di gestire e mantenere meglio gli stili, soprattutto nei progetti di grandi dimensioni.

In sintesi, SCSS non solo mantiene tutte le funzioni dei CSS, ma introduce anche funzionalità avanzate come variabili, nidificazione, miscelazione, importazione, ecc. Queste funzioni consentono agli sviluppatori di scrivere e gestire i fogli di stile in modo più efficiente e sono comunemente utilizzate nei moderni front- sviluppo finale.

Confronto tra scss e css

grammatica:

  • CSS: sintassi di base del foglio di stile a cascata, le regole sono definite tramite selettori, attributi e valori.
  • SCSS: SCSS è un linguaggio di preprocessore per CSS Fornisce più funzioni e sintassi, come variabili, regole annidate, mixin, importazioni, ecc., che rendono la scrittura dei fogli di stile più flessibile ed efficiente.

Leggibilità e manutenibilità:

  • CSS: nei progetti più grandi, i file CSS possono diventare molto prolissi e difficili da mantenere perché mancano di funzionalità strutturate e modulari.
  • SCSS: SCSS supporta variabili e regole nidificate. Queste funzionalità rendono il codice più leggibile e gestibile. Utilizzando variabili e mixin, è possibile ridurre la scrittura ripetitiva del codice e le regole nidificate possono esprimere più chiaramente la relazione gerarchica della struttura HTML.

Estensione della funzione:

  • CSS: i CSS standard possono solo eseguire la definizione dello stile di base e la corrispondenza del selettore.
  • SCSS: SCSS introduce funzioni avanzate come il mixaggio, l'ereditarietà e i calcoli. Queste funzioni rendono i fogli di stile più flessibili e potenti e possono far fronte meglio a requisiti di stile complessi.

Compatibilità:

  • CSS: i browser supportano direttamente i CSS, non sono necessari ulteriori passaggi di compilazione.
  • SCSS: SCSS deve essere convertito in un normale file CSS da un compilatore prima che possa essere compreso e applicato dal browser.

curva di apprendimento:

  • CSS: Imparare i CSS è relativamente semplice, basta comprendere la combinazione di base di selettori, proprietà e valori.
  • SCSS: L'apprendimento di SCSS richiede la padronanza della sua sintassi e delle sue funzioni uniche, come variabili, miscelazione, nidificazione, ecc., che richiede un certo processo di apprendimento e adattamento.

In sintesi, rispetto ai CSS ordinari, SCSS fornisce più strumenti e funzionalità per semplificare la scrittura e la manutenzione dei fogli di stile, ed è particolarmente adatto per lo sviluppo di progetti grandi e complessi. Tuttavia, per piccoli progetti o semplici esigenze di stile, i semplici CSS possono essere più semplici e convenienti.

Utilizzo di scss

Prima di imparare scss, installa prima due plug-in in vscode per convertire scss in normali file CSS per il successivo apprendimento!

Cerca sass nello store dei plug-in, scarica i due plug-in seguenti e riavvia vscode!

dichiarare variabili

Dichiarare le variabili in SCSS è molto semplice, puoi utilizzare il simbolo $ per definire le variabili.

Ecco un semplice esempio che mostra come dichiarare e utilizzare le variabili in SCSS:

  1. // 定义变量
  2. $primary-color: #3498db;
  3. $secondary-color: #2ecc71;
  4.  
  5. // 使用变量
  6. body {
  7.   background-color: $primary-color;
  8. }
  9.  
  10. a {
  11.   color: $secondary-color;
  12. }

Nell'esempio precedente, abbiamo definito due variabili $primary-color e $secondary-color per memorizzare rispettivamente il colore primario e il colore secondario. Possiamo quindi utilizzare queste variabili nelle regole di stile per mantenere i colori coerenti e facili da modificare in tutto il foglio di stile.

Quando un file SCSS viene compilato in un normale file CSS, tutte le variabili verranno sostituite con i valori corrispondenti, quindi il file CSS finale generato non conterrà alcuna dichiarazione di variabile.

Differenziare le variabili predefinite

In SCSS è possibile utilizzare variabili predefinite per garantire che una variabile abbia un valore alternativo se non è definita. Ciò è particolarmente utile quando si lavora con temi o si configurano stili.

Ecco un esempio di come dichiarare e utilizzare le variabili predefinite:

  1. // 声明变量，并设置默认值
  2. $primary-color: #3498db !default;
  3. $secondary-color: #2ecc71 !default;
  4.  
  5. // 使用变量
  6. body {
  7.   background-color: $primary-color;
  8. }
  9.  
  10. a {
  11.   color: $secondary-color;
  12. }

Nell'esempio precedente, abbiamo utilizzato il tag !default per definire il valore predefinito. Ciò significa che se $primary-color o $secondary-color non sono definiti altrove prima di essere introdotti nel file SCSS, utilizzeranno i valori predefiniti specificati (#3498db e #2ecc71). Se queste variabili sono state definite prima dell'importazione del file, i valori predefiniti verranno ignorati.

Il vantaggio dell'utilizzo delle variabili predefinite è che consente di fornire valori alternativi per le variabili senza sovrascrivere le variabili già definite. Ciò è particolarmente utile per creare temi o condividere variabili su più file di stile.

Distinguere tra variabili globali e variabili locali

  • Variabili globali: le variabili globali sono variabili dichiarate all'esterno di un selettore o all'esterno di un mixer/funzione. Sono accessibili in tutto il foglio di stile e se la stessa variabile globale è definita in più file, i loro valori rimarranno coerenti.
  • Variabili locali: le variabili locali sono variabili definite all'interno di un selettore o all'interno di un mixer/funzione. Possono essere utilizzati solo nell'ambito in cui sono definiti e non sono più validi al di fuori di tale ambito.

Nota: le variabili locali sovrascrivono le variabili globali

Quando una variabile con lo stesso nome di una variabile globale viene dichiarata nuovamente in un ambito locale, la variabile locale sovrascrive il valore della variabile globale. Ciò consente di definire diversi valori variabili per un selettore o mixer specifico senza influenzare la situazione globale.

Utilizzare la parola chiave !global per trasformare le variabili locali in variabili globali

SCSS fornisce la parola chiave !global per dichiarare esplicitamente le variabili locali come variabili globali. Ciò fa sì che il valore di una variabile locale venga promosso all'ambito globale in cui è dichiarato, sovrascrivendo qualsiasi variabile globale esistente con lo stesso nome.

Esempio:

  1. // 全局变量
  2. $primary-color: #3498db;
  3.  
  4. .button {
  5.   // 局部变量，覆盖全局变量
  6.   $primary-color: #cc582e;
  7.   background-color: $primary-color; // 使用局部变量值
  8. }
  9.  
  10. // 使用 !global 将局部变量变为全局变量
  11. $primary-color: #cddb34;
  12.  
  13. .button {
  14.   // 使用 !global 将局部变量变为全局变量
  15.   $primary-color: #2ecc71 !global;
  16. }
  17.  
  18. body {
  19.   background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
  20. }

Nel primo esempio, la variabile locale $primary-color all'interno del selettore .button sovrascrive il valore della variabile globale. Nel secondo esempio, utilizzando la parola chiave !global, le variabili locali all'interno del selettore .button vengono convertite in variabili globali, influenzando così i valori delle variabili nell'ambito globale.

Sintassi nidificata

Annidamento del selettore

nidificazione di base

La nidificazione dei selettori consente di annidare le regole di stile per i selettori secondari all'interno dei selettori principali, ad esempio:

  1. // SCSS代码
  2. .navbar {
  3.   background-color: #333;
  4.   padding: 10px;
  5.  
  6.   ul {
  7.     list-style: none;
  8.     margin: 0;
  9.     padding: 0;
  10.  
  11.     li {
  12.       display: inline-block;
  13.       margin-right: 10px;
  14.  
  15.       a {
  16.         text-decoration: none;
  17.         color: #fff;
  18.  
  19.         &:hover {
  20.           text-decoration: underline;
  21.         }
  22.       }
  23.     }
  24.   }
  25. }

Nel codice precedente, il selettore .navbar contiene un ul, li e un sotto-selettore nidificati. Questa struttura nidificata rende le regole di stile più chiare e più facili da gestire.

Riferimento del selettore principale nidificato (&)

In SCSS, il simbolo & viene utilizzato per fare riferimento a un selettore genitore, particolarmente utile nel caso di pseudo-classi o pseudo-elementi. Ad esempio, utilizza &:hover per fare riferimento al selettore principale del selettore corrente e aggiungi uno stile di stato :hover.

  1. .button {
  2.   background-color: #3498db;
  3.   color: #fff;
  4.   padding: 8px 16px;
  5.   border: none;
  6.   text-align: center;
  7.   text-decoration: none;
  8.   display: inline-block;
  9.  
  10.   &:hover {
  11.     background-color: #2980b9;
  12.   }
  13. }

Considerazioni sulla nidificazione
  • Profondità del selettore: evitare l'annidamento eccessivamente profondo del selettore in quanto potrebbe aumentare la priorità dello stile, rendendo difficili le sostituzioni e la manutenzione dello stile.
  • Leggibilità: quando si utilizza l'annidamento dei selettori, prestare attenzione a mantenere il codice leggibile e chiaro ed evitare strutture annidate eccessivamente complesse.
  • Prestazioni: le strutture nidificate possono aumentare la dimensione del file CSS generato, ma di solito possono essere ottimizzate con un'organizzazione e una scrittura di stile adeguate.
annidato annidato

SCSS consente più livelli di annidamento dei selettori, ad esempio:

  1. .container {
  2.   .row {
  3.     .col {
  4.       width: 100%;
  5.     }
  6.   }
  7. }

Nidificazione di proprietà

In SCSS, oltre all'annidamento dei selettori, c'è anche la funzione di annidamento degli attributi, che è un'altra caratteristica che rende i fogli di stile più puliti e facili da gestire. L'annidamento delle proprietà consente di organizzare insieme le proprietà correlate, in modo simile al modulo di un oggetto.

Nidificazione degli attributi di base

La nidificazione delle proprietà può essere utilizzata per inserire proprietà correlate all'interno di un blocco di codice, ad esempio:

  1. .navbar {
  2.   font: {
  3.     family: Arial, sans-serif;
  4.     size: 16px;
  5.     weight: bold;
  6.   }
  7.   margin: {
  8.     top: 10px;
  9.     bottom: 15px;
  10.   }
  11.   padding: {
  12.     left: 20px;
  13.     right: 20px;
  14.   }
  15. }

Nell'esempio precedente, i blocchi di carattere, margine e riempimento contengono attributi correlati. Questa organizzazione rende le proprietà all'interno di ciascun blocco più chiare e più facili da modificare e mantenere.

Considerazioni sulla nidificazione
  • Proprietà supportate: non tutte le proprietà CSS supportano la nidificazione, solitamente quelle che possono accettare coppie chiave-valore, come font, margine, riempimento, bordo, ecc.
  • Leggibilità: quando si utilizza l'annidamento degli attributi, garantire la leggibilità e la chiarezza del codice ed evitare annidamenti eccessivi e strutture complesse.
  • Nidificazione nidificata: puoi anche nidificare altre proprietà all'interno di nidificazioni di proprietà, che possono organizzare e strutturare ulteriormente i tuoi stili.

ereditare

In SCSS, l'ereditarietà (Estendi) è una funzionalità molto utile che consente a un selettore di ereditare le regole di stile di un altro selettore. Questa funzionalità riduce il codice CSS duplicato e rende i fogli di stile più modulari e più facili da mantenere.

Utilizzo di base

L'ereditarietà del selettore può essere ottenuta utilizzando la parola chiave @extend. Per esempio:

  1. %message-shared {
  2.   border: 1px solid #ccc;
  3.   padding: 10px;
  4.   color: #333;
  5. }
  6.  
  7. .success-message {
  8.   @extend %message-shared;
  9.   background-color: lightgreen;
  10. }
  11.  
  12. .error-message {
  13.   @extend %message-shared;
  14.   background-color: lightcoral;
  15. }

Nell'esempio precedente, %message-shared è un selettore di segnaposto che definisce un insieme comune di stili. .success-message e .error-message ereditano rispettivamente lo stile di %message-shared e aggiungono i propri colori di sfondo.

Note sull'ereditarietà

  • Ordine dei selettori: l'ereditarietà può generare un lungo elenco di selettori, che può influire sulla priorità dello stile. Assicurati che l'ordine e la posizione dei selettori siano corretti quando usi @extend per evitare inutili problemi di priorità.
  • Limitazione: i selettori ereditati devono apparire dopo il selettore ereditato. Ciò significa che se definisci un selettore nel tuo file SCSS e usi @extend per ereditarne lo stile nel codice successivo, questa eredità avrà effetto solo dopo che sarà definita.
  • Selettori di segnaposto e selettori di classe: i selettori di segnaposto che iniziano con % sono generalmente obiettivi migliori per l'ereditarietà rispetto ai selettori di classe diretti perché non generano selettori ridondanti dopo la compilazione. I selettori di classe, d'altro canto, genereranno stili duplicati ovunque vengano utilizzati, aumentando la dimensione e la complessità del file.

Scenari applicativi

L'ereditarietà è particolarmente adatta per selettori con caratteristiche comuni, come componenti di pulsanti, finestre di messaggio, ecc. Attraverso l'ereditarietà, puoi riutilizzare le stesse regole di stile in scenari diversi mantenendo il codice pulito e gestibile.

Per riassumere, l'ereditarietà in SCSS è uno strumento potente che può aiutarti a evitare la duplicazione dello stile e a mantenere la modularità e la chiarezza del tuo codice. Tuttavia, quando lo usi, devi prestare attenzione all'ordine e alla posizione dei selettori e alla ragionevolezza uso dei segnaposto.

Segnaposto%

Il segnaposto % è un selettore speciale in SCSS che viene spesso utilizzato per definire regole di stile che possono essere ereditate ma che non generano un effettivo output CSS. Nello specifico:

definire il segnaposto

  1. %placeholder-selector {
  2.   // 样式规则
  3. }

Nell'esempio precedente, %placeholder-selector è un selettore di segnaposto che inizia con %. Definisce un insieme di regole di stile, ma il nome del selettore corrispondente non apparirà nel CSS compilato.

segnaposto di eredità

  1. .some-class {
  2.   @extend %placeholder-selector;
  3.   // 可选的额外样式
  4. }

L'utilizzo della parola chiave @extend consente a .some-class di ereditare lo stile di %placeholder-selector. Ciò significa che .some-class applicherà tutte le regole di stile definite in %placeholder-selector e genererà l'output CSS corrispondente.

Vantaggi e scenari applicabili

  • Riduci la duplicazione: i selettori di segnaposto consentono di definire un set comune di regole di stile e riutilizzarle tramite ereditarietà quando necessario, evitando la duplicazione del codice.
  • Modularità: i selettori di segnaposto contribuiscono alla modularità e alla manutenibilità del codice, soprattutto nei progetti di grandi dimensioni, e possono migliorare la chiarezza strutturale dei fogli di stile.
  • Evita la ridondanza: rispetto all'utilizzo dei selettori di classe, i selettori di segnaposto non generano selettori ridondanti, riducendo così la dimensione dei file CSS.

Precauzioni

  • Ordine e posizione: quando si utilizza @extend per ereditare i selettori di segnaposto, il selettore di segnaposto ereditato deve essere definito prima che venga utilizzato il relativo selettore, altrimenti potrebbero verificarsi problemi di gerarchia di stile imprevisti.
  • Miscelazione: puoi combinare selettori di segnaposto con selettori di classi ordinari, ma devi gestirli con attenzione per evitare output CSS imprevisti.

In sintesi, il selettore di segnaposto% è un potente strumento in SCSS che può aiutare gli sviluppatori a migliorare la riusabilità e la manutenibilità dei fogli di stile riducendo al contempo la ridondanza CSS non necessaria.

Mescola @mixin

I mixin sono un'altra funzionalità molto potente di SCSS che consente di incapsulare un insieme di regole di stile in un blocco di codice riutilizzabile e quindi fare riferimento laddove necessario. A differenza del selettore segnaposto %, i mixin possono generare direttamente l'output CSS, quindi è adatto a quelle situazioni in cui lo stesso stile deve essere utilizzato in più posti.

Definire la miscela

  1. @mixin mixin-name($parameter1, $parameter2, ...) {
  2.   // 样式规则使用参数
  3. }

Nell'esempio sopra, la parola chiave @mixin definisce un mixin chiamato nome-mixin che può accettare più argomenti (se necessario) e definisce un insieme di regole di stile al suo interno.

chiamata mix

  1. .some-class {
  2.   @include mixin-name(value1, value2, ...);
  3.   // 可选的额外样式
  4. }

Utilizza la parola chiave @include per richiamare il mixin nel selettore e passargli i parametri. In questo modo, .some-class applicherà le regole di stile definite nel mixin e applicherà i valori dei parametri passati alle variabili dei parametri corrispondenti.

esempio

  1. @mixin button-style($background-color, $text-color) {
  2.   display: inline-block;
  3.   padding: 10px 20px;
  4.   border: none;
  5.   border-radius: 4px;
  6.   background-color: $background-color;
  7.   color: $text-color;
  8.   text-align: center;
  9.   text-decoration: none;
  10.   font-size: 16px;
  11.   cursor: pointer;
  12.   transition: background-color 0.3s ease;
  13.  
  14.   &:hover {
  15.     background-color: darken($background-color, 10%);
  16.   }
  17. }
  18. .button-primary {
  19.   @include button-style(#3498db, #fff);
  20. }
  21.  
  22. .button-secondary {
  23.   @include button-style(#2ecc71, #fff);
  24. }

 

Vantaggi e scenari applicabili

  • Flessibilità: il mixaggio consente di passare i parametri e di generare dinamicamente diversi output di stile secondo necessità, rendendo lo stile più flessibile e personalizzabile.
  • Leggibilità: incapsulare le regole di stile comunemente utilizzate in un mixin può migliorare la leggibilità e la manutenibilità del codice, soprattutto se lo stesso stile è richiesto in più punti.
  • Riutilizzabilità: lo stesso mix può essere chiamato più volte in diversi selettori e file per evitare definizioni ripetute di stili e ridurre la quantità di codice.

Precauzioni

  • Conflitti di denominazione: assicurati che i mixin non siano in conflitto con i nomi di classi CSS esistenti o altri mixin per evitare sostituzioni o errori di stile imprevisti.
  • Passaggio dei parametri: quando si chiama un mixin, assicurarsi che i tipi di parametri e l'ordine passati siano coerenti con i requisiti della definizione del mixin per evitare errori di compilazione o comportamenti imprevisti.
  • Impatto sulle prestazioni: l'uso estensivo di mixin può aumentare la dimensione dei file CSS risultanti, quindi prestare attenzione all'impatto sulle prestazioni.

In sintesi, mix @mixin è un potente strumento per incapsulare e riutilizzare le regole di stile in SCSS. Può migliorare significativamente la manutenibilità e la flessibilità dei CSS ed è adatto a vari requisiti di stile complessi e ripetuti.

SCSS utilizza istruzioni condizionali

In SCSS, le istruzioni condizionali consentono di generare dinamicamente gli stili CSS in base a condizioni specifiche. Le istruzioni condizionali in SCSS sono simili alle istruzioni condizionali in altri linguaggi di programmazione, inclusi @if, @else if e @else.

@if istruzione

L'istruzione @if consente di generare stili in base a una condizione. La sintassi è la seguente:

  1. $use-rounded-corners: true;
  2.  
  3. .button {
  4.   @if $use-rounded-corners {
  5.     border-radius: 4px;
  6.   }
  7. }

Nell'esempio precedente, se il valore della variabile $use-rounded-corners è vero, viene generato lo stile della classe .button, incluso border-radius: 4px;. Se la condizione è falsa, questa parte dello stile non verrà generata.

Istruzioni @else e @else if

Oltre a @if, puoi anche utilizzare @else if e @else per aggiungere più rami condizionali.

  1. $button-size: medium;
  2.  
  3. .button {
  4.   @if $button-size == small {
  5.     padding: 5px 10px;
  6.   } @else if $button-size == medium {
  7.     padding: 10px 25px;
  8.   } @else if $button-size == large {
  9.     padding: 15px 30px;
  10.   } @else {
  11.     padding: 10px 20px; // 默认值
  12.   }
  13. }

In questo esempio, a seconda del valore della variabile $button-size, vengono selezionati diversi valori di riempimento da applicare alla classe .button. Se non esiste alcuna condizione corrispondente, verrà eseguito il blocco di codice in @else.

Annidamento di istruzioni condizionali

Le istruzioni condizionali possono anche essere annidate per gestire una logica più complessa.

  1. $button-style: flat;
  2. $button-size: medium;
  3.  
  4. .button {
  5.   @if $button-style == flat {
  6.     background-color: transparent;
  7.     color: #333;
  8.     border: 1px solid #333;
  9.  
  10.     @if $button-size == small {
  11.       padding: 5px 10px;
  12.     } @else if $button-size == medium {
  13.       padding: 10px 25px;
  14.     } @else if $button-size == large {
  15.       padding: 15px 30px;
  16.     } @else {
  17.       padding: 10px 20px; // 默认值
  18.     }
  19.   } @else if $button-style == raised {
  20.     background-color: #3498db;
  21.     color: #fff;
  22.     padding: 10px 20px;
  23.     border-radius: 4px;
  24.   } @else {
  25.     // 默认样式
  26.     background-color: #db6334;
  27.     color: #fff;
  28.     padding: 10px 20px;
  29.   }
  30. }

In questo esempio, vengono selezionati diversi stili da applicare in base ai valori di $button-style e $button-size. Questo approccio nidificato consente di generare regole di stile complesse basate su molteplici condizioni.

Insomma

Utilizzando istruzioni condizionali, puoi ottenere una definizione di stile più flessibile e dinamica in SCSS e generare diverse regole CSS basate su condizioni diverse, migliorando così la manutenibilità e la scalabilità del foglio di stile.

Tre tipi di loop in SCSS

In SCSS, ci sono tre principali costrutti di loop che possono essere utilizzati per generare regole CSS ripetute: @for, @each e @ while.

@for ciclo

Il ciclo @for viene utilizzato per generare ripetutamente stili in base a determinati passaggi e condizioni.

grammatica di base：

  1. @for $i from <start> through <end> {
  2.   // 循环体
  3. }
  • da<start> Attraverso<end> : Specificare il valore iniziale e il valore finale del loop (incluso il valore finale).
  • La variabile $i può essere utilizzata nel corpo del ciclo per rappresentare il valore dell'indice del ciclo corrente.

Esempio：

  1. @for $i from 1 through 3 {
  2.   .item-#{$i} {
  3.     width: 100px * $i;
  4.   }
  5. }

Nell'esempio precedente, vengono generate tre classi .item-1, .item-2 e .item-3, con larghezze impostate rispettivamente su 100px, 200px e 300px.

@ogni ciclo

Il ciclo @each viene utilizzato per attraversare elenchi o dati di tipo mappato e generare stili per ciascun elemento.

grammatica di base：

  1. @each $var in <list or map> {
  2.   // 循环体
  3. }
  • $var: rappresenta la variabile del ciclo corrente.
  • <list or map>: può essere un elenco (ad esempio $list: item1, item2, item3;) o una mappa (coppia chiave-valore).

Esempio：

  1. $colors: (red, green, blue);
  2.  
  3. @each $color in $colors {
  4.   .text-#{$color} {
  5.     color: $color;
  6.   }
  7. }

 

In questo esempio vengono generate tre classi .text-red, .text-green e .text-blue e i relativi colori del testo vengono impostati sui valori di colore corrispondenti.

@ciclo while

Il ciclo @ while genera ripetutamente stili in base a una condizione finché la condizione non viene soddisfatta.

grammatica di base：

  1. $i: 1;
  2. @while $i < 4 {
  3.   // 循环体
  4.   $i: $i + 1; // 更新条件
  5. }
  • $i: come contatore di loop o variabile di condizione.
  • Qualsiasi codice SCSS può essere eseguito nel corpo del ciclo. Di solito, la variabile di condizione deve essere aggiornata alla fine del corpo del ciclo per evitare cicli infiniti.

Esempio：

  1. $i: 1;
  2. @while $i < 4 {
  3.   .item-#{$i} {
  4.     width: 100px * $i;
  5.   }
  6.   $i: $i + 1;
  7. }

Questo codice genera tre classi .item-1, .item-2 e .item-3 e imposta le loro larghezze rispettivamente su 100px, 200px e 300px.

Riassumere

Le tre strutture di loop SCSS @for, @each e @ while vengono utilizzate per eseguire cicli per indice, attraversare elenchi o dati di tipo mappa e generare stili basati rispettivamente su cicli condizionali. Queste strutture ad anello rendono SCSS più potente e flessibile, capace di generare regole CSS complesse in base alle esigenze.

Funzioni e utilizzo personalizzati

In SCSS, i fogli di stile possono essere migliorati con funzioni personalizzate che accettano parametri e restituiscono valori elaborati.

Definire funzioni personalizzate

In SCSS, utilizzare la parola chiave @function per definire le funzioni, che possono avere parametri e restituire valori. Ad esempio, definiamo una funzione per calcolare la larghezza totale del box model di un elemento:

  1. @function total-width($padding, $border, $margin, $content-width) {
  2.   @return $padding + $border + $margin + $content-width;
  3. }

Nell'esempio sopra:

  • larghezza-totale è il nome della funzione.
  • La funzione accetta quattro parametri: $padding, $border, $margin, $content-width.
  • L'istruzione @return viene utilizzata per restituire un valore calcolato.

Utilizza funzioni personalizzate

Una volta definita una funzione, è possibile utilizzarla negli stili per calcolare e generare i valori richiesti. Per esempio:

  1. .element {
  2.   width: total-width(10px, 1px, 5px, 100px);
  3. }

 

In questo esempio, la funzione larghezza totale verrà chiamata con i parametri 10px, 1px, 5px e 100px. Il risultato restituito dalla funzione (116px) verrà applicato alla proprietà width di .element.

Precauzioni

  • Le funzioni possono essere incluse in qualsiasi file SCSS e possono essere organizzate e importate come altre regole di stile.
  • Tutte le funzionalità di SCSS, come le istruzioni di controllo (come @if, @for, @each, @ while) e le funzioni integrate, possono essere utilizzate nelle funzioni.
  • I parametri della funzione possono essere qualsiasi tipo di dati SCSS, inclusi numeri, stringhe, colori, ecc.

Compiti a casa

Usa SCSS per cambiare il tema in bianco e nero della pagina

codice html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <link rel="stylesheet" href="main.css">
  7.   <title>黑白色主题切换</title>
  8. </head>
  9. <body>
  10.   <div class="container">
  11.     <button id="theme-toggle">切换主题</button>
  12.     <div class="box">
  13.       <div class="content">
  14.         <p>这是一些文本内容。</p>
  15.         <p>这是一些文本内容。</p>
  16.         <p>这是一些文本内容。</p>
  17.         <p>这是一些文本内容。</p>
  18.         <p>这是一些文本内容。</p>
  19.         <p>这是一些文本内容。</p>
  20.         <p>这是一些文本内容。</p>
  21.       </div>
  22.     </div>
  23.   </div>
  24.  
  25.   <script src="main.js"></script>
  26. </body>
  27. </html>

scss

  1. // 定义轻主题的样式变量
  2. $light-theme: (
  3.   background-color: white,
  4.   text-color: black,
  5.   highlight-color: #f0f0f0
  6. );
  7.  
  8. // 定义暗主题的样式变量
  9. $dark-theme: (
  10.   background-color: black,
  11.   text-color: white,
  12.   highlight-color: #333333
  13. );
  14.  
  15. // 定义一个混合（mixin）来应用主题样式
  16. // 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
  17. @mixin theme($theme) {
  18.   background-color: map-get($theme, background-color);
  19.   color: map-get($theme, text-color);
  20.  
  21.   // 为 .box 类应用主题的高亮颜色
  22.   .box {
  23.     background-color: map-get($theme, highlight-color);
  24.   }
  25. }
  26.  
  27. // 应用轻主题样式到 body 元素，并添加过渡效果
  28. body {
  29.   @include theme($light-theme);
  30.   transition: all 0.3s ease;
  31. }
  32.  
  33. // 为 body 的 dark 类应用暗主题样式
  34. body.dark {
  35.   @include theme($dark-theme);
  36. }
  37.  
  38. // 设置容器的文本居中和顶部间距
  39. .container {
  40.   text-align: center;
  41.   margin-top: 20px;
  42. }
  43.  
  44. // 配置主题切换按钮的样式
  45. #theme-toggle {
  46.   padding: 10px 20px;
  47.   cursor: pointer;
  48.   border: none;
  49.   outline: none;
  50.   background-color: #007bff;
  51.   color: white;
  52.   font-size: 16px;
  53.   border-radius: 5px;
  54. }
  55.  
  56. // 鼠标悬停在主题切换按钮上时改变背景色
  57. #theme-toggle:hover {
  58.   background-color: #0056b3;
  59. }
  60.  
  61. // 定义 .box 类的基本样式和过渡效果
  62. .box {
  63.   margin: 20px auto;
  64.   padding: 20px;
  65.   width: 50%;
  66.   border: 1px solid #ccc;
  67.   transition: all 0.3s ease;
  68.  
  69.   // 内容区域的样式配置
  70.   .content {
  71.     p {
  72.       margin: 10px 0;
  73.     }
  74.   }
  75. }

js

  1. /**
  2.  * 为主题切换按钮添加点击事件监听器
  3.  * 当按钮被点击时，切换文档主体的黑暗主题样式
  4.  * 
  5.  * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
  6.  * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
  7.  * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
  8.  */
  9. document.getElementById('theme-toggle').addEventListener('click', () => {
  10.   document.body.classList.toggle('dark');
  11. });

Profilo personale

Si dedica alla ricerca tecnologica da più di 30 anni ed è esperto in vari linguaggi come Java, Linux, Javascript, php, css, ecc. Ha dato numerosi contributi nel campo dell'open source stazione di documentazione per gli sviluppatori per condividere alcuni problemi nello sviluppo della tecnologia per riferimento futuro

le mie informazioni di contatto

Posta