Articles
Introduzione a SASS/SCSS
Mixin in SASS

Mixin in SASS

Questo articolo spiega i mixin in SASS.

Spiegheremo i mixin in SASS con esempi pratici.

YouTube Video

Mixin in SASS

Panoramica – Che cos'è un Mixin?

I mixin sono un meccanismo che ti permette di definire insiemi di proprietà di stile usati frequentemente come funzioni riutilizzabili, che puoi richiamare ovunque sia necessario. Sono molto utili per mantenere le classi CSS e le proprietà multiple DRY (Don't Repeat Yourself).

Esempio: Il mixin più semplice

Qui sotto c'è un esempio semplice di un mixin che riutilizza insieme border-radius e box-shadow. Chiamando questo mixin, puoi applicare lo stesso aspetto a più elementi.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8.card {
 9  @include card-style;
10  padding: 1rem;
11}
  • Con questo mixin, non hai più bisogno di ripetere gli stili direttamente.
  • Per chiamarlo basta una sola riga: @include card-style;.

Mixin con argomenti (parametri)

I mixin possono accettare argomenti, proprio come le funzioni. Questo ti permette di cambiare l'aspetto mantenendo la stessa logica. Segue un esempio in cui il colore viene passato come argomento.

 1// Mixin with parameters: accepts a color and optional radius
 2@mixin colored-box($bg-color, $radius: 4px) {
 3  background-color: $bg-color;
 4  border-radius: $radius;
 5  padding: 0.75rem;
 6}
 7
 8.box-primary {
 9  @include colored-box(#007acc);
10}
11
12.box-custom {
13  @include colored-box(#ffcc00, 12px);
14}
  • Fornendo un valore predefinito, puoi controllare il comportamento quando un argomento viene omesso.
  • In questo esempio viene usato il raggio predefinito e solo il colore di sfondo viene sovrascritto.

Casi in cui si usano argomenti variadici (...)

Quando desideri accettare più valori, puoi usare argomenti variadici ($args...). Questo è utile per generare classi di utilità o per passare liste di fallback.

È utile quando è necessario passare più famiglie di font o più valori di ombra.

1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3  box-shadow: $shadows;
4}
5
6.panel {
7  @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}
  • Dal lato della chiamata, puoi passare più ombre separate da virgole.
  • In questo modo, puoi usare lo stesso mixin sia per ombre semplici che complesse.

Mixin con @content — Ricevere un blocco

Con @content, un mixin può ricevere un blocco di stili da chi lo richiama. Questo permette al mixin di fornire una struttura comune, mentre chi lo richiama specifica i dettagli interni.

 1// Mixin that sets up a responsive container and yields to caller via @content
 2@mixin responsive-container($max-width: 1200px) {
 3  margin-left: auto;
 4  margin-right: auto;
 5  padding-left: 1rem;
 6  padding-right: 1rem;
 7  max-width: $max-width;
 8
 9  @content; // place where caller's styles are inserted
10}
11
12.header {
13  @include responsive-container(1000px) {
14    display: flex;
15    align-items: center;
16    justify-content: space-between;
17  }
18}
  • Dal lato della chiamata, puoi aggiungere un blocco a @include per inserire stili al suo interno.
  • Questo pattern è utile per contenitori di layout come griglie, card e form.

Mixin avanzati con condizionali e cicli

Strutture di controllo come @if e @for possono essere usate all'interno dei mixin. Puoi usarle per automatizzare la generazione di utility e raggruppare impostazioni responsive.

Qui sotto c'è un esempio di generazione automatica di larghezze per classi di utilità.

 1@use 'sass:math';
 2
 3// Mixin that generates width utility classes from a list of fractions
 4@mixin generate-widths($fractions) {
 5  @each $name, $fraction in $fractions {
 6    .w-#{$name} {
 7      width: math.percentage($fraction);
 8    }
 9  }
10}
11
12$widths: (
13  '1-4': 0.25,
14  '1-3': 0.3333,
15  '1-2': 0.5,
16  '3-4': 0.75
17);
18
19@include generate-widths($widths);
  • Semplicemente passando una mappa delle frazioni che desideri generare al momento della chiamata, puoi generare automaticamente tutte le classi di utilità corrispondenti in una sola volta.
  • L'utilizzo di questo approccio presenta il vantaggio di ridurre la definizione manuale degli stili mantenendo al contempo la coerenza del design.

Mixin vs Placeholder (%placeholder)

Mentre i mixin inseriscono direttamente un insieme di proprietà, i placeholder vengono utilizzati con @extend quando si ereditano gli stili. I mixin possono generare CSS duplicato in alcuni casi, mentre @extend può produrre un CSS più compatto in certe situazioni.

Comprendendo gli scopi e le differenze del CSS generato da ciascun metodo, sarai in grado di scegliere l'approccio più ottimale.

 1// Placeholder example (for comparison)
 2%btn-base {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn-primary {
 9  @extend %btn-base;
10  background: #007acc;
11  color: #fff;
12}
13
14.btn-secondary {
15  @extend %btn-base;
16  background: #e0e0e0;
17}
  • Quando utilizzi @extend su un placeholder, più selettori possono essere consolidati in una singola regola, producendo un CSS più compatto.
  • D'altra parte, poiché i mixin inseriscono le proprietà direttamente dove sono necessarie, offrono flessibilità e aiutano ad evitare l'unione involontaria dei selettori.

Pattern pratici comuni (responsive, prefissi vendor, ecc.)

In pratica, è utile inserire processi comuni come i prefissi vendor e le funzionalità responsive nei mixin. Qui sotto c’è un esempio che combina proprietà di transform e prefissi. Puoi centralizzare il codice per la compatibilità con i browser, rendendo più facile la manutenzione.

 1// Mixin for transform with vendor prefixes
 2@mixin transform($value) {
 3  -webkit-transform: $value;
 4  -ms-transform: $value;
 5  transform: $value;
 6}
 7
 8.icon-rotate {
 9  @include transform(rotate(45deg));
10}
  • L'utilizzo è semplice e puoi usarlo ovunque, ad esempio @include transform(rotate(10deg));.
  • Anche se in futuro i prefissi dovessero diventare non necessari, la manutenzione sarà più semplice perché aggiornando il mixin la modifica si rifletterà in tutto il codice.

Esempio pratico: Card e pulsanti combinati

Di seguito è riportato un esempio in cui gli stili dei pulsanti utilizzati all'interno della scheda sono unificati con un mixin, consentendone la modifica in base al colore del tema.

Questo organizza il pattern 'card + pulsante', comunemente usato, tramite i mixin.

 1// Simple mixin that applies border-radius and box-shadow
 2@mixin card-style {
 3  border-radius: 8px;
 4  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 5  background: #fff;
 6}
 7
 8// Mixin for transform with vendor prefixes
 9@mixin transform($value) {
10  -webkit-transform: $value;
11  -ms-transform: $value;
12  transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17  display: inline-block;
18  padding: $padding;
19  background: $bg;
20  color: $color;
21  border-radius: 6px;
22  text-decoration: none;
23  cursor: pointer;
24  @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29  @include card-style; // reuse earlier card-style mixin
30  padding: $gap;
31  @content;
32}
33
34.card-feature {
35  @include card {
36    .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37    .cta {
38      @include btn(#007acc);
39    }
40  }
41}
42
43.card-warning {
44  @include card {
45    .title { font-weight: bold; }
46    .cta {
47      @include btn(#ff6600);
48    }
49  }
50}
  • Usando questi mixin, puoi scrivere componenti in modo conciso.

Attenzione alle prestazioni e al CSS generato

Poiché i mixin inseriscono le proprietà ogni volta che vengono chiamati, usare ampiamente @include per la stessa regola può far aumentare la dimensione finale del CSS. Puoi ottimizzare combinandoli con i placeholder e la progettazione dei componenti quando necessario.

Inoltre, le seguenti misure sono anch'esse efficaci.

  • Gli stili utilizzati frequentemente dovrebbero essere trasformati in classi per consentirne il riutilizzo.
  • I modelli comuni dovrebbero essere raggruppati utilizzando @content.
  • La generazione di utilità complesse dovrebbe essere eseguita solo al momento della compilazione.

Suggerimenti per un debug più facile

Quando si utilizzano i mixin, è anche importante sviluppare metodi per migliorare il debugging e la manutenibilità. Utilizzando nomi di variabili chiari e aggiungendo commenti all'interno dei mixin, sarà più facile capire il codice durante le revisioni successive. Inoltre, se la funzionalità diventa complessa, dividere il mixin in unità più piccole faciliterà i test e migliorerà la manutenibilità.

Inoltre, abilitare le source map permette di tracciare facilmente quale mixin ha generato quale CSS, facilitando l’individuazione dei problemi.

Di seguito è riportato un esempio di mixin di facile comprensione con commenti di documentazione.

1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6  outline: none;
7  box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}
  • Avere commenti di documentazione organizzati in questo modo rende più facile condividerli e comprenderli all'interno del team.
  • Poiché i commenti di documentazione SASS possono essere estratti automaticamente con strumenti compatibili, sono anche utili per generare documenti come le guide di stile.

Riepilogo

Poiché i mixin permettono di raggruppare stili riutilizzabili, aiutano a ridurre la duplicazione del codice e a migliorare la manutenibilità. Inoltre, quando più selettori condividono le stesse regole, considera di utilizzare non solo i mixin, ma anche @extend (placeholder). Inoltre, sebbene @content permetta una separazione flessibile tra wrapper di layout e contenuti, un uso eccessivo di @include può portare a un CSS generato troppo pesante, quindi è consigliata cautela. È importante sfruttare appieno argomenti, valori predefiniti e argomenti variadici per progettare mixin generici e facili da estendere.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Moduli integrati di SASS