Snippet Sunday – Sass Mixins

This is a repost of an article I wrote for the K-State OME web team blog.

Sans explanation, these are a few mixins that I’ve used on a couple of recent projects:

Setting background

@mixin bkgrd($img, $min-height)
    background: transparent url($img) no-repeat 50% 0
    min-height: $min-height

Setting sprites

@mixin content-pre-sprite($img, $x, $y, $height, $width)
    background: transparent url($img) no-repeat $x $y
    height: $height
    width: $width

@mixin content-sprite($x, $y, $height, $width)
    background: transparent url(../images/content-sprite.png) no-repeat $x $y
    height: $height
    width: $width

@mixin content-sprite-hover($x, $y)
    background-position: $x $y

Center block elements

@mixin block-center
    margin: 0 auto

CSS3 properties

Transitions

@mixin transition($property, $duration, $function)
    -webkit-transition: $property $duration $function
    -moz-transition: $property $duration $function
    -o-transition: $property $duration $function
    transition: $property $duration $function

Transforms

@mixin transform($transform)
    -webkit-transform: $transform
    -moz-transform: $transform
    -o-transform: $transform
    transform: $transform

Box-shadow

@mixin box-shadow($hor, $vert, $blur, $color)
    -webkit-box-shadow: $hor $vert $blur $color
    -moz-box-shadow: $hor $vert $blur $color
    -o-box-shadow: $hor $vert $blur $color
    box-shadow: $hor $vert $blur $color

@mixin box-shadow($shadow)
    -webkit-box-shadow: $shadow
    -moz-box-shadow: $shadow
    -o-box-shadow: $shadow
    box-shadow: $shadow

@mixin double-box-shadow($shadow-1, $shadow-2)
    -webkit-box-shadow: $shadow-1, $shadow-2
    -moz-box-shadow: $shadow-1, $shadow-2
    -o-box-shadow: $shadow-1, $shadow-2
    box-shadow: $shadow-1, $shadow-2

Border-radius

@mixin border-radius($radius)
    -webkit-border-radius: $radius
    -moz-border-radius: $radius
    -o-border-radius: $radius
    -ms-border-radius: $radius
    -khtml-border-radius: $radius
    border-radius: $radius

Text-shadow

@mixin text-shadow($shadow)
    -webkit-text-shadow: $shadow
    -moz-text-shadow: $shadow
    -o-text-shadow: $shadow
    text-shadow: $shadow

@mixin double-text-shadow($shadow-1, $shadow-2)
    -webkit-text-shadow: $shadow-1, $shadow-2
    -moz-text-shadow: $shadow-1, $shadow-2
    -o-text-shadow: $shadow-1, $shadow-2
    text-shadow: $shadow-1, $shadow-2

Web fonts

@mixin corner-store
    font-family: "corner-store-1","corner-store-2"
    font-weight: 400

@mixin museo-slab-700
    font-family: "museo-slab-1","museo-slab-2"
    font-weight: 700

@mixin museo-slab-900
    font-family: "museo-slab-1","museo-slab-2"
    font-weight: 800

@mixin skolar-web-semibold-italic
    font-family: "skolar-1","skolar-2"
    font-style: italic
    font-weight: 600

Optimizing mixins

These mixins worked great for the projects they were used on it, but they are far from optimized. Defaults could be set up for them. They could also be set up to allow for multiple instances, so I wouldn’t have to create a mixin in like “double-text-shadow.” With that being said, for optimized CSS3 mixins it’s easier/wiser to use Compass than to reinvent the wheel. My next project will be using Compass.

You might have also noticed slightly different syntax on a few similar mixins, such as:

@mixin box-shadow($hor, $vert, $blur, $color)
    -webkit-box-shadow: $hor $vert $blur $color
    -moz-box-shadow: $hor $vert $blur $color
    -o-box-shadow: $hor $vert $blur $color
    box-shadow: $hor $vert $blur $color

@mixin box-shadow($shadow)
    -webkit-box-shadow: $shadow
    -moz-box-shadow: $shadow
    -o-box-shadow: $shadow
    box-shadow: $shadow

Even if I’m using shorthand properties, I prefer to use descriptive argument names for the values. Some properties like box-shadow only have one value, so I’ll sometimes only use one argument for conciseness. I do prefer the first one, especially if used within a team setting, but both work.

Not sure how to use mixins? Check out Gettin’ Sass-y. Curious about the background sprite mixins? Check out Practically Sass-y: CSS Sprites.