This article is the second part of my exploration into mixins from the Bourbon Sass library. Among them you’ll find useful examples which will speed up your workflow and minimize your Sass code.
Another List Of Goodies
We’ll be getting a taste of the following eight mixins:
Inline Block mixinPosition mixinTriangle mixinClearfix mixinButton mixinSize mixinHiDPI media query mixinRetina Image mixin
As with the previous tutorial, the examples below don’t necessarily represent best design practices, but are chosen for exploring the basic functionality of these mixins.
Inline Block Mixin
Paragraphs, by default, display as block elements.
HTML:
``` html
Yada yada yada
Yada yada yada
```
Block-level elements, such as paragraphs, automatically create a new row in the layout.
This mixin comes in handy if you want to change the default display behaviour of elements to inline-block. It not only sets display: inline-block but also takes care of quirks and legacy support for IE7.
Learn more about display on designshack.net.
Sass: These blocks have float-like behaviour, through inline-block.
```css .paragraphs-behave-like-blocks +inline-block background-color: tomato
// SCSS syntax // .paragraphs-behave-like-blocks { @include inline-block; // } ```
Take a look at the generated CSS output. Who wants to handle nasty stuff like that anyway?
CSS output:
css
.paragraphs-behave-like-blocks {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
background-color: tomato;
}
Set to display: inline-block, the paragraphs get displayed inline, but retain their block-level characteristics.
Attention! Notice the whitespace between the block elements. If you were using float to achieve the same layout, you wouldn’t see any whitespace. It’s a kind of default whitespace, present in the HTML, which doesn’t go away by setting margins to 0px. Instead, you need to remove any character gaps in the markup itself, as demonstrated in this pen:
Position Mixin
This mixin is a shorthand for writing something like the following:
Sass:
css
.some-element
position: relative
top: 0px
left: 100px
Sass:
```css .some-element +position(relative, 0px 0 0 100px) //top right bottom left
// SCSS syntax .some-element // @include position(relative, 0px 0 0 100px); ```
That’s it. No magic, but still super useful. Keeping stylesheets simple and readable pays off over time.
Triangle Mixin
Want to use CSS triangles without fiddling around? There’s certainly no need to use images for the job. It’s easy as pie with this mixin.
Sass:
```css .triangle +triangle(25px, tomato, down) // size, color, direction
// SCSS syntax .triangle { @include triangle(25px, tomato, down); // } ```
The third parameter defines the direction. Options for this mixin include:
downupleft-
right up-rightup-leftdown-rightdown-left
You can even define a second color if you need a background color for your triangle.
Clearfix Mixin
Containers which have floated elements within them experience the zero-height container problem—in essence the container element deflates to zero pixels if all its elements inside are floated and taken out of the container’s flow. Essentially, there’s nothing left to fill the container.
The clearfix mixin takes care of this when applied to the container/wrapper element. The best thing about this is that it doesn’t require addional “empty” markup to accomodate the clearfix. It keeps things semantic, separating concerns, by just adding the clearfix in your stylesheets. Take a look at this very simple example:
HTML:
```html
:after pseudo element to place an empty string at the very end of the container. In doing so it mimics content after the logo and tricks the browser into expanding the grey container to surround other elements inside.
##Button Mixin
Need high quality buttons out of the box?
### Standard Button
HTML:
``` html
```
Sass:
``` css
$light-blue: #2485F1
.super-duper-button
+button($light-blue)
// SCSS syntax
// .super-duper-button {
@include button($light-blue);
// }
```
That’s it! Simple and semantically clean buttons. They even come with great looking subtle hover effects. And there are two more options:
###Pill Button
HTML:
``` html
```
``` css
$dark-pink: #6B32D1
.super-duper-button
+button(pill, $dark-pink)
// SCSS syntax
// .super-duper-button {
@include button(pill, $dark-pink);
// }
```
###Shiny Button
HTML:
``` html
```
Sass:
``` css
$acceptance-green: #43C914
.super-duper-button
+button(shiny, $acceptance-green)
// SCSS syntax
// .super-duper-button {
@include button(shiny, $acceptance-green);
// }
```
**Attention!** Please note that the text on the buttons automatically changes its color depending on the *lightness* of the base-color of the button. That way the mixin provides better contrast and readability. Awesome!
Sass:
``` css
$light-grey: #DEDEDE
.super-duper-button
+button(shiny, $light-grey)
// SCSS syntax
// .super-duper-button {
@include button(shiny, $light-grey);
// }
```
##Size Mixin
Do you ever need to define width and height in one declaration? With Bourbon, here’s all you need to do:
Sass:
``` css
.small-article
+size(300, 400)
// SCSS syntax
// .small-article {
@include size(300, 400);
// }
```
CSS output:
``` css
.small-article {
width: 300px;
height: 400px;
}
```
You can provide pixel values or just numerical values.
You can use auto for these values as well. If you provide only one size, Bourbon assumes you want a square.
Sass:
``` css
.square
+size(25px)
// SCSS syntax
// .square {
@include size(25px);
// }
```
##HiDPI Mixin
If you want to quickly generate completely vendor-prefixed media queries for detecting *HiDPI* (“Retina”) devices, this mixin comes in handy.
Begin by providing a target *device pixel ratio* and declarations that change if the media query kicks in. The default ratio is 1.3.
Sass HiDPI-media-query:
``` css
.image
width: 150px
+hidpi(1.5)
width: 200px
// SCSS syntax
// .image {
width: 150px;
+hidpi(1.5) {
width: 200px;
}
// }
```
CSS output:
``` css
.image {
width: 150px;
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5/1),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
width: 200px;
}
}
```
Pretty cool! It slims down repetitive code quite a bit.
##Retina Image Mixin
Depending on the *pixel density* of the device displaying your designs, you can provide images with the appropriate bitmap resolution. This fine mixin provides a *retina background-image* or a *non-retina background-image*—depending on the result of the mixin’s internal HiDPI-media-query checking the device for its pixel density.
If I’m not mistaken, as a bonus, it will serve only one of the images to avoid downloading both—which is especially advantageous for cellular networks. If all the above is gobbledygook to you, I’d recommend starting with this fantastic [article](http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) on Smashing Magazine.
Sass:
``` css
.logo
+retina-image(logo-icon, 50px, 30px)
// SCSS syntax
// .logo {
@include retina-image(logo-icon, 50px, 30px);
// }
```
The CSS output helps explain its functionality:
``` css
.logo {
background-image: url(logo-icon.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (min--moz-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 1.3 / 1),
only screen and (min-resolution: 125dpi),
only screen and (min-resolution: 1.3dppx) {
.logo {
background-image: url(logo-icon_2x.png);
background-size: 50px 30px;
}
}
```
The default of a device pixel ratio of 1.3 targets Apple “Retina” devices (which have a ratio of 2) as well as devices with pixel ratios as “low” as 1.3.
This mixin expects a **.png** as the standard extension for all images. Per default, it also expects a **_2x.png** extension to the filename of your retina-image. You can overwrite both defaults by providing another retina-filename and a standard extension, like so:
Sass:
``` css
.logo
+retina-image(logo-icon, 50px, 30px,
$extension: jpg,
$retina-filename: HiDPI-logo-icon,
$retina-suffix: _retina )
// SCSS syntax
// .logo {
@include retina-image(logo-icon, 50px, 30px,
$extension: jpg,
$retina-filename: HiDPI-logo-icon,
$retina-suffix: _retina );
// }
```
CSS output:
``` css
.logo {
background-image: url(logo-icon.jpg);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (min--moz-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 1.3 / 1),
only screen and (min-resolution: 125dpi),
only screen and (min-resolution: 1.3dppx) {
.logo {
background-image: url(HiDPI-logo-icon_retina.jpg);
background-size: 50px 30px;
}
}
```
##Cheers!
That’s all we’ll cover in terms of Bourbon mixins. In the next tutorial we’ll take a look at Bourbon’s functions.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
