HTML.it logo
Learn
  • Design
    • Grafica
    • User Interface Design
    • Adobe Creative Suite
    Guide
    Approfondimenti
    Faq
    Notizie
    Tutto in Design >
  • Development
    • .NET
    • ASP
    • CMS
    • Flash
    • Java
    • JavaScript
    • PHP
    • Essentials
    • Ruby
    • XML
    • Editor
    • CSS
    • HTML
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Development >
  • Mobile
    • Android Studio
    • Cordova
    • Eclipse
    • Objective C
    • Swift
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Mobile >
  • Server
    • Cloud
    • Database
    • OS
    • Sicurezza
    • Network
    Tutto in Server >
  • Digital Marketing
    • SEO
    • Affiliate Marketing
    • Social Media Marketing
    Tutto in Digital Marketing >
  • Makers
    • Arduino
    • RaspberryPi
    • Stampa 3D
    Guide
    Approfondimenti
    Notizie
    Tutto in Makers >
  • Game Design
    • Unity
    Guide
    Approfondimenti
    Notizie
    Tutto in Game Design >
Download
  • Audio e Video
    • Player Audio Video
    • Codec audio
    • Editor audio video
    • Masterizzazione
    • Ripper e Convertitori
    • Speech
    Tutto in Audio e Video >
  • Educazione
    • Bambini
    • Cucina
    • Salute e Benessere
    • Istruzione
    Tutto in Educazione >
  • Giochi
    • Arcade
    • Avventura
    • Azione
    • Board
    • Carte
    • Giochi di ruolo
    • Giochi Online
    • Puzzle e Enigmistica
    • Simulazione
    • Sparatutto
    • Sport
    • Strategia e Giochi di Guerra
    • Tempo Libero
    Tutto in Giochi >
  • Grafica
    • Accessori & Mappe
    • Animazione
    • CAD – 3D
    • Cattura schermo
    • Convertitori e ridimensionatori
    • Editor
    • Flash
    • Font
    • Fotoritocco
    • Gallerie e album
    • Icone e loghi
    • Visualizzatori
    Tutto in Grafica >
  • Internet
    • Browser
    • Chat e IM
    • eMail
    • Estensioni & Temi
    • FTP
    • Network
    • News e RSS
    • Peer to Peer
    • Webcam
    Tutto in Internet >
  • Programmazione
    • Accessori
    • CMS e E-Commerce
    • Editor e Compilatori
    • Editor e strumenti Web
    • Linguaggi
    Tutto in Programmazione >
  • Sicurezza
    • Antispam
    • Antispyware
    • Antivirus
    • Server
    Tutto in Sicurezza >
  • Produttività
    • Backup
    • Compressione
    • Connettività
    • Database
    • Fax e Telefonia
    • Gestione disco
    • Ottimizzazione
    • Ufficio
    • Utilità di Sistema
    Tutto in Produttività >
Notizie
Video
Forum
in  
Trend
GuideHTMLJavaLinguaggio CPythonJavaScriptPHPC++CSSAndroidApprofondimenti
INDICE DELLA GUIDA
  1. 1 SASS, introduzione e installazione

  2. 2 Selettori nidificati

SassScript
  1. 3 La direttiva @extend e i placeholeder (con %)

  2. lezione
    4 di 18

    I mixin

  3. 5 Tipi di variabili in SASS

  4. 6 Esempi con @mixin

  5. 7 @if, controlli condizionali in SASS

  6. 8 @for, @each e @while, i cicli in SASS

Compass
  1. 9 Compass, sfondi multipli e gradienti

  2. 10 Compass, trasformazioni e transizioni

  3. 11 Animazioni con Compass

Caratteristiche avanzate
  1. 12 Media queries

  2. 13 La direttiva @function

  3. 14 BEM, Block Element Modifier

  4. 15 Trasformare in BEM un CSS esistente

  5. 16 @import, parziali e StyleDocco: mettere ordine

Oltre SASS
  1. 17 Estendere SASS con Ruby

  2. 18 SASS e Grunt

  • Learn
  • Guida SASS
  • I mixin
lezione
4 di 18

I mixin

  • di Sandro Paganotti
  • 1 Settembre 2014

A volte la direttiva @extend non è sufficiente a garantire l’automazione di particolari porzioni del nostro foglio di stile, basti pensare a tutti in quei casi nei quali dovremmo replicare la stessa struttura generale con alcune piccole, ma significative, variazioni.

Esprimiamo meglio questo concetto con un esempio, supponiamo di aver disegnato un <button> come quello seguente:

Nell’esaminare il codice CSS necessario, notiamo come, per ottenere l’effetto desiderato, il colore principale dell’elemento debba essere ripetuto in diverse proprietà: background, outline, box-shadow e lo stesso color in caso il mouse si sovrapponga all’elemento:


.button
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none; !
	padding: 10px 20px;
	display: inline-block;
	text-transform: uppercase; !
	background: blue;
	outline: 1px solid blue;
	box-shadow: 0 0 10px blue;
	color: white;
	border: 1px solid white;
	 	

	&:hover {
		color: blue;
		background: white;
		box-shadow: none;
	}
}
button {
	@extend .button;
}

Ora supponiamo di dover produrre per lo stesso progetto una variazione del pulsante precedente dove il colore principale sia il verde. Certo, potremmo utilizzare la direttiva @extend, ma il risultato sarebbe piuttosto confuso e poco elegante considerato il numero di proprietà da alterare:


button.green
{
	@extend .button;
	background: green;
	outline: 1px solid green;
	box-shadow: 0 0 10px green;
	&:hover{
		color: green;
	}
}

La direttiva @mixin

Casi come questi sono perfetti per essere risolti con l’utilizzo dei @mixin, questa potente direttiva, che sarà il fulcro dell’intera lezione, consente infatti di creare gruppi di selettori e proprietà CSS ripetibili all’interno del nostro fogli di stile su cui possiamo applicare dei parametri arbitrari, proprio come dovessimo invocare una funzione alla quale passare un set di argomenti.

Con questo nuovo strumento nella nostra cassetta degli attrezzi proviamo a riscrivere l’esempio precedente (provalo online):


@mixin baseButton($bgColor)
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px 20px;
	display: inline-block;
	text-transform: uppercase;
	background: $bgColor;
	outline: 1px solid $bgColor;
	box-shadow: 0 0 10px $bgColor;
	color: white;
	border: 1px solid white;
	&:hover {
		color: $bgColor;
		background: white;
		box-shadow: none;
	}
}
button.green{
	@include baseButton(green);
} 
button.red{
	@include baseButton(red);
}

Comodo, e decisamente più elegante! $bgColor è una vera e propria variabile, utilizzata all’interno delle singole proprietà e pilotata attraverso l’argomento passato durante l’invocazione al @mixin.

Nella lezione che segue esamineremo meglio i tipi di variabile in SASS, che ci consentiranno di lavorare in modo ancora più flessibile.

Se vuoi aggiornamenti su CSS inserisci la tua e-mail nel box qui sotto:

Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi:

5 / 18

Tipi di variabili in SASS

Ultime notizie

FinalCrypt: File Encryption Application open source

PHP: meno ricerche = meno utilizzatori?

Ubuntu 14.04: fine del supporto il 30 aprile 2019

Social media marketing: gli errori più frequenti

IBM Think 2019: nuove soluzioni per il Cloud ibrido

I Video di HTML.it

Pulire i registri di sistema con CCleaner

Percorsi formativi correlati
Android Mobile Developer

Android Mobile Developer

5
guide
250 ore

Tutti i linguaggi per diventare uno sviluppatore di app per Android.

DB Administrator

DB Administrator

4
guide
80 ore

Come creare applicazioni per il Web con PHP e MySQL per il DBMS.

iOS Mobile Developer

iOS Mobile Developer

4
guide
180 ore

Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.

Java Developer

Java Developer

7
guide
300 ore

I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.

Java Security Expert

Java Security Expert

5
guide
120 ore

Diventare degli esperti in tema di sicurezza delle applicazioni Java.

Maker

Maker

2
guide
50 ore

Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.

NoSQL DB Expert

NoSQL DB Expert

5
guide
200 ore

Le principali guide di HTML.it per diventare un esperto dei database NoSQL.

PHP Cloud Developer

PHP Cloud Developer

7
guide
80 ore

Ecco come i professionisti creano applicazioni per il Cloud con PHP.

PHP Developer

PHP Developer

5
guide
100 ore

Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.

PHP e JavaScript Developer

PHP e JavaScript Developer

6
guide
100 ore

Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.

PHP Framework Expert

PHP Framework Expert

6
guide
120 ore

Realizzare applicazioni per il Web utilizzando i framework PHP.

PHP SysAdmin

PHP SysAdmin

6
guide
80 ore

Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.

Sviluppare un eCommerce con PHP

Sviluppare un eCommerce con PHP

5
guide
120 ore

Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.

Web &amp; Mobile Designer

Web & Mobile Designer

5
guide
300 ore

Percorso base per avvicinarsi al web design con un occhio al mobile.

WordPress Developer

WordPress Developer

5
guide
150 ore

Realizzare siti Web e Web application con WordPress a livello professionale.

Ti consigliamo anche

Guida SASS

  • 18 Lezioni
  • Facile

Un preprocessore CSS serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso . Esistono diversi preprocessori CSS tra cui orientarsi, la nostra scelta cade su SASS, che si distingue per completezza, stabilità, estensibilità e integrazione con gli altri componenti tipici di uno stack Web moderno.

  • w3.css: guida all'uso
  • Forme geometriche: come costruire con i CSS

SASS: annidare o non annidare?

L'utilizzo dell'annidamento dei selettori è una pratica comune, e in alcuni casi anche utile. Tuttavia essa presenta vantaggi e svantaggi: ecco quali.

  • PHP: meno ricerche = meno utilizzatori?
  • Chrome: nuovi piani per la webRequest API

Modello unico per i siti dei Comuni Italiani

Facebook lancia Spectrum, per comprimere le immagini

Compass + WordPress: e vissero felici e contenti…

  • Guide
  • Approfondimenti
  • Script
  • Q&A
  • Software
  • Tutorial
  • Videogiochi
  • Tag Software
  • News
  • Video
  • Forum
  • Chi siamo
  • Pubblicità
  • Contatti
  • Cookie policy
  • Privacy policy
  • Privacy Policy Newsletter
© HTML.it 1997-2019 | Triboo Media – P. IVA 06933670967 | HTML.it è un periodico telematico reg. Trib. Roma n. 309/2008 | 2.10.2