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:

div {
    -webkit-transition: margin 0.3s, padding 0.3s;
    -moz-transition: margin 0.3s, padding 0.3s;
    -ms-transition: margin 0.3s, padding 0.3s;
    -o-transition: margin 0.3s, padding 0.3s;
    transition: margin 0.3s, padding 0.3s; }