Dopo aver visto la direttiva @EXTEND all’ indirizzo https://umbriawayinfo.wordpress.com/2021/01/04/fondamenti-di-web-design-18-sass-e-la-direttiva-extend/ vediamo la direttiva @MIXIN che é più facile da spiegare con i fatti che con le parole. Sostanzialmente inventiamo dei selettori fittizi che andranno poi a sostituire il contenuto di quelli veri, vediamo nella pratica inventando un selettore fantasma che non ha propietà definite in modo chiaro, in quanto i valori di $value sono da riempire:

@mixin margin($value) {
margin: $value;
}

A questo punto dobbiamo associare dei valori a queste proprietà e ciò avviene utilizzando il richiamo dicitura @INCLUDE nella zona del file SCSS dove dobbiamo intervenire nel codice, nel nostro caso richiamando esempi precedenti e modificandoli:

$backgroundselezionato:red;
$backgroundselezionato:rgb(158, 152, 152);
$colorselezionato:#976316;
$colorselezionato1:#ccc;
$colorselezionato2:red;
$fontselezionato:verdana;

@mixin margin($value) {
margin: $value;
}


body {
    background-color:$backgroundselezionato;
    color:$colorselezionato;
    font-family: $fontselezionato;
    }

    
a {
color:red;
&:hover {
  color:rgb(94, 255, 0);
}

}

    .opzione1 {
    color:$colorselezionato1;

    h1
    {
        font-size: 40px;
    }

    p
    {
        color: $colorselezionato;
        font:{
            size:30px;
            weight:bold;
            family:verdana;
        }
        @include margin(100px);
    }


    }
    
    .opzione2 {
            color:$colorselezionato;
            @include margin(50px);
    }
    
    .opzione3 {
            color:$colorselezionato1;
            @include margin(20px);
    }

Quale è il vantaggio di inserire questo meccanismo? Qui i valori del margine sono differenziati ed é facile intervenire velocemente per stilizzare gli elementi della pagina, in quanto basta semplicemente valorizzare in modo diverso le parentesi, come al solito la compilazione automatica che converte in CSS ci mostra la differenza tra i tre margini in modo tangibile:

body {
  background-color: #9e9898;
  color: #976316;
  font-family: verdana;
}

a {
  color: red;
}

a:hover {
  color: #5eff00;
}

.opzione1 {
  color: #ccc;
}

.opzione1 h1 {
  font-size: 40px;
}

.opzione1 p {
  color: #976316;
  font-size: 30px;
  font-weight: bold;
  font-family: verdana;
  margin: 100px;
}

.opzione2 {
  color: #976316;
  margin: 50px;
}

.opzione3 {
  color: #ccc;
  margin: 20px;
}
/*# sourceMappingURL=stylesass.css.map */

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...