If you’re not already using a CSS preprocessor then you should probably start now. They make writing CSS much more fun. I started out with LESS shortly after starting at Fi last year but have now moved over to SASS. They’re both pretty similar but SASS has slightly more features.

One of the great things about CSS preprocessors are mixins. Below is a useful mixin I recently wrote for creating CSS triangles.

// ============================================================

//

// arrow

//

// @param width : px , em

// @param height : px , em

// @param direction : up , down , left , right

// @param color : hex , rgb

//

// ============================================================



= arrow ( $ width : 20px , $ height : 20px , $ direction : up , $ color : red )



width : 0

height : 0



// Right

@if $direction == right

border-top : $height/ 2 solid transparent

border-bottom : $height/ 2 solid transparent

border-left : $width solid $color



// Left

@if $direction == left

border-top : $height/ 2 solid transparent

border-bottom : $height/ 2 solid transparent

border-right : $width solid $color



// Up

@if $direction == up

border-left : $width/ 2 solid transparent

border-right : $width/ 2 solid transparent

border-bottom : $height solid $color



// Down

@if $direction == down

border-left : $width/ 2 solid transparent

border-right : $width/ 2 solid transparent

border-top : $height solid $color

You can use the mixin to create triangles at your pleasure, like this.

.label

background-color : #e88565

height : 60px

line-height : 60px

position : absolute

text-transform : uppercase

width : 280px



& : after

+ arrow ( 40px , 30px , down , #e88565 )

content : ''

left : 0

margin : 60px 0 0 120px

position : absolute

top : 0

Have a play around with them on CodePen here.

CSS3 Mixins

Whilst we’re on the subject of mixins you should check out Matthew Wagerfield’s useful CSS3 mixins which allow you to use CSS3 features without having to worry about vendor prefixes. Check them out on GitHub here.

A useful tip for SASS is how to use variables in a string. I got a little stumped when I first started using Matt’s CSS3 mixins as I was unsure how to specify transitions on multiple attributes with a variable like this:

$ transition-duration : 0.3s



div

+ transition ( margin $transition-duration , padding $transition-duration )

The above will throw a compile error and this:

$ transition-duration : 0.3s



div

+ transition ( "margin $transition-duration, padding $transition-duration" )

Will obviously output this:

div {

-webkit-transition : margin $transition-duration , padding $transition-duration ;

-moz-transition : margin $transition-duration , padding $transition-duration ;

-ms-transition : margin $transition-duration , padding $transition-duration ;

-o-transition : margin $transition-duration , padding $transition-duration ;

transition : margin $transition-duration , padding $transition-duration ; }

The way to specify variables in a string is this:

$ transition-duration : 0.3s



div

+ transition ( "margin #{$transition-duration}, padding #{$transition-duration}" )

The above will output the expected: