MIXINS SASS e sai cosa bevi!

web design umbria

All’ indirizzo https://www.farwebdesign.com/projectsass/mixins/ c’è un esempio di tecnica MIXINS caratteristica di SASS. Per spiegare che cosa sono e che fanno, pensiamo solo alle TECNICHE DI INCLUSIONE DI PHP CHE consente agli sviluppatori DI INTEGRARE nella pagina i famosi INCLUDE E REQUIRE che non fanno altro che raccogliere righe di codice esterne espresse sotto forma di file e inserirle nella pagina principale. Pensiamo solo a una Home Page che ha una testata e un footer che potrebbero diventare per semplicità di gestione semplicemente parti esterne facilmente gestibili che comunque si vedrebbero in primo piano senza limitazioni. In SASS questo meccanismo è integrato e legato però non a inclusioni esterne, ma interne, nel senso che io potrei benissimo disporre di un blocco base che di volta in volta potrebbe variare a seconda delle esigenze e in questo caso potremmo pensare di inserire dei parametri di ingresso che mi consentiranno di cambiare magari la dimensione del Font solo parzialmente come espresso da questo esempio.

in rete ci sono interessanti articoli sui MIXINS su come ottimizzare blocchi di codice riutilizzabili come per esempio https://engageinteractive.co.uk/blog/top-10-scss-mixins e tanti altri COME https://www.html.it/pag/49695/i-mixin/

La nostra pagina come struttura non differirà dagli esempi precedenti:

<head>
<meta charset=”UTF-8″ />
<link rel=”stylesheet” href=”css/main.css” />
<title>SASS Variables</title>
</head>
<body>
<nav class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>

<section class=”banner”>
<h1>Page Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptatem consequuntur molestias nihil dolor delectus similique culpa fugiat, numquam magnam.</p>
</section>

<footer class=”footer”>
<h3>Footer Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, laudantium.</p>
</footer>
</body>

file main.scss presente nella cartella scss, in neretto sono presenti le parti su cui focalizzarci:

$color-primary: orange;
$color-secondary: gray;
$color-tertiary: royalblue;

$font-lg: 40px;
$font-md: 30px;
$font-sm: 20px;

.nav {
background-color: $color-primary;

ul li {
list-style: none;
}

a {
text-decoration: none;
font-size: $font-sm;
color: $color-secondary;

&:hover {
color: $color-tertiary;
}
}
}

@mixin headingStyles($fontSize: 50px) {
font-size: $fontSize;
color: $color-secondary;
text-align: center;
}

@mixin transition($param…) {
transition: $param;
}

.banner h1 {
@include headingStyles($font-lg);
}

.footer h3 {
@include headingStyles;
@include transition(color .5s, background-color 1s);

&:hover {
color: $color-tertiary;
background-color: $color-primary;
}
}

web designer umbriavediamo il file main.css presente nella cartella CSS generato in AUTOMATICO dal compilatore SASS attivabile con il famoso npm run watch che richiama un file batch specifico che abbiamo inserito nella root dell’ applicazione ossia nel file packages.json iizializzato a inizio progetto con il comando INIT da CLI (da come il tutto è descritto senza virgole, la dinamica ricorda proprio le macchine futuristiche di Leonardo :-)).

.nav {
background-color: orange; }
.nav ul li {
list-style: none; }
.nav a {
text-decoration: none;
font-size: 20px;
color: gray; }
.nav a:hover {
color: royalblue; }

.banner h1 {
font-size: 40px;
color: gray;
text-align: center; }

.footer h3 {
font-size: 50px;
color: gray;
text-align: center;
transition: color 0.5s, background-color 1s; }
.footer h3:hover {
color: royalblue;
background-color: orange; }

web designer umbriaImmaginare solo una tecnica di inclusione interna di blocchi di codici riutilizzabili, soggetti di volta in volta a seconda dei casi e delle circostanze a piccole variazioni in una pagina CSS è pura follia, per questo SASS é un strumento versatile e potente sempre inserito nella lista delle conoscenze che un web designer dovrebbe ostentare quando si propone alla Nasa con il suo CV per lanciare satelliti su Marte. La magia di questa tecnologia consiste nel fatto che quello che si vede usando i MIXINS in https://www.farwebdesign.com/projectsass/mixins/ non punta a qualcosa che esiste realmente, ma a qualcosa che non esiste se non in locale. Quando il compilatore genera dal nulla il file statico CSS siamo di fronte solo alla punta dell’ iceberg perché come abbiamo visto il grosso del lavoro prima della pubblicazione su server in rete avviene localmente su computer dell’ utente con la Common Line Interface che rimane in ascolto mentre progettiamo le nostre pagine dinamiche scss e che dovrà preoccuparsi di compilare ogni volta a runtime ogni nuova implementazione. Il tutto ricorda un pò Matrix, perché paradossalmente vediamo di fatto qualcosa che non c’è, o meglio che viene compilato in locale e non sul server del nostro service provider.

Crea un sito o un blog gratuitamente presso WordPress.com.

Su ↑