July 1, 2010

Simplify CSS3 with helper functions: mixins

SASS and LESS are two CSS pre-processing languages. While they have different syntaxes the aim in the same: simplify the creation of CSS files.

For Fame Driver I use both libraries. LESS is used for the customer’s customizable stylesheets. Since it is CSS syntax it is easier to understand and learn. For the backend I use SASS.

CSS3 support is great, but there are a lot of vendor specific rules. Using a mixin abstracts the vendor specifics. As browsers improve, the mixin can be updated without requiring your CSS stylesheets to change.

Lets take a look at two examples using SASS and LESS mixins.

Shadows

Simple shadows are not too bad since Mozilla, Webkit and CSS3 all use the same syntax.

CSS

This is the code which you would manually create or will be created by SASS or LESS.

p.with_shadow {
  -moz-box-shadow: black, 0, 4, 2;
  box-shadow: black, 0, 4, 2;
  -webkit-box-shadow: black, 0, 4, 2; }

p.with_another_shadow {
  -moz-box-shadow: #F00, 0, 4, 2;
  box-shadow: #F00, 0, 4, 2;
  -webkit-box-shadow: #F00, 0, 4, 2; }

SASS

Define your SASS mixin, helper function.

=shadow($color, $x, $y, $size) // c
  -moz-box-shadow: $color, $x, $y, $size
  box-shadow: $color, $x, $y, $size
  -webkit-box-shadow: $color, $x, $y, $size

Use the mixin.

p.with_shadow
  +shadow(#000, 0, 4, 2)

p.with_another_shadow
  +shadow(#F00, 0, 4, 2)

LESS CSS

Define a LESS mixin like any other rule, only with arguments. LESS allows for default arguments.

/* Helper function */
.shadow_maker(@color:#000, @x:0, @y:0, @size:2) {
  -moz-box-shadow: @color, @x, @y, @size;
  box-shadow: @color, @x, @y, @size;
  -webkit-box-shadow: @color, @x, @y, @size; }

To use a mixin, include the rule with arguments.

p.with_shadow {
  .shadow_maker(#000, 0, 4, 2);
}

p.with_another_shadow {
  .shadow_maker(#F00, 0, 4, 2);
}

Gradients

These are more complex since Webkit and Mozilla have different syntaxes.

CSS

p.with_gradient {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffffff));
  background-image: -moz-linear-gradient(top, #ff0000, #ffffff);
}

SASS

// Helper function
=gradient($c, $cc)
  background: $c // default for backward compatibility
  background-image: -webkit-gradient(linear, left top, left bottom, from($c), to($cc))
  background-image: -moz-linear-gradient(top, $c, $cc)

p.with_gradient
  +gradient(#F00, #FFF)

LESS CSS

/* Helper function */
.gradient(@c:#FFF, @cc:#EEE){
  background: @c; /* default for backward compatibility */
  background-image: -webkit-gradient(linear, left top, left bottom, from(@c), to(@cc));
  background-image: -moz-linear-gradient(top, @c, @cc);
}

p.with_gradient {
  .gradient(#F00, #FFF); 
}

Organization

I keep one file which defines all my mixins and variables. That file is included in the other LESS or SASS files at the head.

LESS

@import "helpers"; /* will load helpers.less */
/*... define the rest of you rules ... */

SASS

@import helpers // will load helpers.sass
// define the rest of the rules