One for the Road più gustosi mix di Bourbon

Questo articolo è la seconda parte della mia esplorazione nei mixin della libreria Bourbon Sass. Tra questi troverai utili esempi che velocizzeranno il tuo flusso di lavoro e ridurranno al minimo il tuo codice Sass.

Un'altra lista di golosità

Avremo un assaggio dei seguenti otto mix:

• Mixin inline block
• Mixin di posizione
• Mixin triangolo
• Mixfix Clearfix
• Bottone di mixin
• Dimensione mixin
• HiDPI media query mixin
• Retina Image mixin

Come nel tutorial precedente, gli esempi seguenti non rappresentano necessariamente le migliori pratiche di progettazione, ma sono scelti per esplorare le funzionalità di base di questi mix.

Inline Block Mixin

I paragrafi, per impostazione predefinita, vengono visualizzati come bloccare elementi.

HTML:

"html

Yada yada yada

Yada yada yada

"

Gli elementi a livello di blocco, come i paragrafi, creano automaticamente una nuova riga nel layout.

Questo mixin è utile se vuoi cambiare il comportamento di visualizzazione predefinito di elementi a inline-block. Non solo set display: blocco in linea ma si occupa anche di stranezze e supporto legacy per IE7.

Ulteriori informazioni sulla visualizzazione su designshack.net.

Sass: questi blocchi hanno un comportamento simile al float, attraverso il blocco in linea.

"css .paragraphs-behave-like-blocks + inline-block background-color: pomodoro

// sintassi SCSS // .paragraphs-behave-like-blocks @include inline-block; // "

Dai un'occhiata all'output CSS generato. Chi vuole comunque gestire cose cattive del genere?

Uscita CSS:

css .paragraphs-behave-like-blocks display: inline-block; vertical-align: baseline; zoom: 1; * display: inline; * vertical-align: auto; colore di sfondo: pomodoro;

Impostato display: blocco in linea, i paragrafi vengono visualizzati in linea, ma mantengono le loro caratteristiche a livello di blocco.

Attenzione! Si noti lo spazio bianco tra gli elementi del blocco. Se stavi usando galleggiante per ottenere lo stesso layout, non vedresti alcun spazio bianco. È una specie di spazio vuoto predefinito, presente nell'HTML, che non va via impostando i margini su 0px. Invece, è necessario rimuovere eventuali lacune di carattere nel markup stesso, come dimostrato in questa penna:

Posizionare Mixin

Questo mixin è una scorciatoia per scrivere qualcosa come il seguente:

Sass:

css posizione .some element: top relativo: 0px left: 100px

Sass:

"css .some-element + position (relativo, 0px 0 0 100px) // in alto a destra in basso a sinistra

// sintassi SCSS .some-element // @include position (relative, 0px 0 0 100px); "

Questo è tutto. Nessuna magia, ma comunque super utile. Mantenere i fogli di stile semplici e leggibili si ripaga nel tempo.

Triangle Mixin

Vuoi usare i triangoli CSS senza fare trucchi? Non c'è certamente bisogno di usare le immagini per il lavoro. È facile come torta con questo mixin.

Sass:

"css .triangle + triangle (25px, tomato, down) // dimensioni, colore, direzione

// sintassi SCSS. Triangolo triangolo @include (25px, pomodoro, in basso); // "

Il terzo parametro definisce la direzione. Le opzioni per questo mixin includono:

• giù
• su
• sinistra

• destra

• in alto a destra
• in alto a sinistra
• in basso a destra
• in basso a sinistra

Puoi anche definire un secondo colore se hai bisogno di un colore di sfondo per il tuo triangolo.

Mixfix Clearfix

I contenitori che hanno elementi fluttuati al loro interno sperimentano il problema del contenitore a altezza zero, in pratica l'elemento contenitore si sgonfia a zero pixel se tutti i suoi elementi all'interno sono flottati e portati fuori dal contenitore flusso. In sostanza, non è rimasto nulla per riempire il contenitore.

Il clearfix mixin si prende cura di questo quando applicato all'elemento contenitore / involucro. La cosa migliore di questo è che non richiede un markup "vuoto" aggiuntivo per accettare la correzione. Mantiene le cose semantiche, separando le preoccupazioni, semplicemente aggiungendo la correzione nei fogli di stile. Dai un'occhiata a questo esempio molto semplice:

HTML:

"html

"Sass:" css $ grigio chiaro: # D4D4D4 .grey-wrapper background-color: $ light-gray + clearfix .logos float: right + background-image (url ("[email protected]"), url ("thoughtbot.png")) posizione-sfondo: centro in alto, in alto a sinistra sfondo-ripetizione: ripetizione-y, ripetizione-x altezza: 220px larghezza: 50% // sintassi SCSS // .grey-wrapper @include clearfix; colore di sfondo: $ grigio chiaro; .logos float: right; @include background-image (url ("[email protected]"), url ("thoughtbot.png")); posizione di sfondo: centro in alto, in alto a sinistra; background-repeat: repeat-y, repeat-x; altezza: 220 px; larghezza: 50%; // "! [file] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633234957.jpg) Nell'esempio sopra, il contenitore grigio si espande per contenere il flottato i loghi al suo interno, tuttavia, quando non è usato il clearfix:! [file] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633341703.jpg) Se si prende uno sguardo al codice sorgente diventa chiaro come funziona questo * micro clearfix *: Sass: [codice sorgente Bourbon] (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix .scss) "css @mixin clearfix &: after content:" "; display: table; clear: both; "Questo mixin usa il :dopo pseudo elemento per posizionare una stringa vuota all'estremità del contenitore. Nel fare ciò imita il contenuto dopo il logo e inganna il browser espandendo il contenitore grigio per circondare altri elementi all'interno. ## Button Mixin Hai bisogno di pulsanti di alta qualità fuori dalla scatola? ### Pulsante standard! [File] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633769651.png) HTML: "html Super duper button" Sass: "css $ blu-chiaro: # 2485F1 .super-duper-button + button ($ light-blue) // sintassi SCSS // .super-duper-button @include button ($ light-blue); // "Questo è tutto ! Pulsanti semplici e semanticamente puliti. Vengono anche con effetti di hover dall'aspetto brillante. E ci sono altre due opzioni: ### Pill Button! [File] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633844440.png) HTML: "html Super pulsante duper pill "css $ dark-pink: # 6B32D1 .super-duper-button + button (pill, $ dark-pink) // sintassi SCSS // .super-duper-button @include button (pill, $ dark- rosa); // "### Shiny Button! [File] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633895872.png) HTML:" html Super duper pulsante lucido "Sass:" css $ accept-green: # 43C914 .super-duper-button + button (lucido, $ acceptance-green) // sintassi SCSS // .super-duper-button @include button (shiny, $ acceptance- verde); // "** Attenzione! ** Si noti che il testo sui pulsanti cambia automaticamente colore a seconda della * luminosità * del colore di base del pulsante, in questo modo il mixin offre un contrasto e una leggibilità migliori. [file] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441634000114.png) Sass: "css $ grigio chiaro: #DEDEDE .super-duper-button + pulsante (lucido, $ grigio chiaro) // sintassi SCSS // .super-duper-button @include button (shiny, $ light-gray); // "## Size Mixin Avete mai bisogno di definire larghezza e altezza in una dichiarazione? Con Bourbon, ecco tutto quello che devi fare: Sass: "css .small-article + size (300, 400) // sintassi SCSS // .small-article @include size (300, 400); //" CSS output: "css .small-article width: 300px; height: 400px;" Puoi fornire valori di pixel o solo valori numerici. Puoi usare auto anche per questi valori. Se fornisci solo una dimensione, Bourbon presume che tu voglia un quadrato. Sass: "css .square + size (25px) // sintassi SCSS // .square @include size (25px); //" ## Mixin HiDPI Se vuoi generare velocemente query multimediali con prefisso per il rilevamento completamente per rilevare * HiDPI * ("Retina"), questo mixin è molto utile. Inizia fornendo un rapporto pixel * del target * dispositivo e le dichiarazioni che cambiano se interviene la query multimediale. Il rapporto predefinito è 1.3. Sass HiDPI-media-query: "css. Larghezza immagine: 150px + hidpi (1,5) larghezza: 200px // sintassi SCSS // .image larghezza: 150px; + hidpi (1,5) larghezza: 200px; //" Output CSS: "css .image width: 150px; @media solo schermo e (-webkit-min-device-pixel-ratio: 1.5), solo schermo e (min-moz-device-pixel-ratio: 1.5), solo schermo e (-o-min-device-pixel-ratio: 1.5 / 1), solo schermo e (min risoluzione: 144 dpi), solo schermo e (risoluzione minima: 1.5dppx) larghezza: 200px; " Molto carino! Riduce un po 'il codice ripetitivo. ## Retina Image Mixin A seconda della * densità di pixel * del dispositivo che visualizza i disegni, è possibile fornire immagini con la risoluzione bitmap appropriata. Questa miscela fine fornisce un'immagine * di sfondo * retina * o un'immagine di sfondo * non retina * -in base al risultato dell'intervallo di media HiDPI interno del mixin che controlla il dispositivo per la sua densità di pixel. Se non sbaglio, come bonus, servirà solo una delle immagini per evitare di scaricarle entrambe, il che è particolarmente vantaggioso per le reti cellulari. Se tutto quanto sopra è gobbledygook per te, ti consiglio di iniziare con questo fantastico [articolo] (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) su Smashing Magazine. Sass: "css .logo + retina-image (logo-icon, 50px, 30px) // sintassi SCSS // .logo @include retina-image (logo-icon, 50px, 30px); //" L'output CSS aiuta a spiegarne la funzionalità: "css .logo background-image: url (logo-icon.png); @media solo schermo e (-webkit-min-device-pixel-ratio: 1.3), solo schermo e (min -moz-device-pixel-ratio: 1.3), solo schermo e (-o-min-device-pixel-ratio: 1.3 / 1), solo schermo e (min-risoluzione: 125 dpi), solo schermo e (risoluzione minima : 1.3dppx) .logo background-image: url (logo-icon_2x.png); background-size: 50px 30px; "Il valore predefinito di un rapporto pixel del dispositivo di 1,3 target dispositivi" Retina "Apple (che hanno un rapporto di 2) così come i dispositivi con rapporti pixel "bassi" come 1.3. Questo mixin prevede un **. Png ** come estensione standard per tutte le immagini. Per impostazione predefinita, prevede anche un'estensione ** _ 2x.png ** nel nome file dell'immagine retina. Puoi sovrascrivere entrambi i valori predefiniti fornendo un altro nome file retina e un'estensione standard, ad esempio: Sass: "css .logo + retina-image (logo-icona, 50px, 30px, $ estensione: jpg, $ retina-filename: HiDPI- logo-icon, $ retina-suffix: _retina) // sintassi SCSS // .logo @include retina-image (logo-icona, 50px, 30px, $ estensione: jpg, $ retina-filename: HiDPI-logo-icon, $ retina-suffix: _retina); // "Output CSS:" css .logo background-image: url (logo-icon.jpg); @media solo schermo e (-webkit-min-device-pixel-ratio : 1.3), solo schermo e (rapporto min-moz-device-pixel: 1.3), solo schermo e (-o-min-device-pixel-ratio: 1.3 / 1), solo schermo e (risoluzione minima: 125 dpi), solo schermo e (risoluzione minima: 1.3dppx) .logo background-image: url (HiDPI-logo-icon_retina.jpg); background-size: 50px 30px; "## Cheers! Questo è tutto ciò che copriremo in termini di mix di Bourbon. Nel prossimo tutorial daremo un'occhiata alle funzioni di Bourbon.