How to generate a colour palette mixin with Sass and Compass

Tags: , &

how-to-generate-a-colour-palette-with-compass-by-zing-design
At Zing Design we are constantly looking for better ways to do things. We wanted to be able to create dynamic colour palettes on the fly with maximum flexibility and minimum hassle. To solve the problem we created a Sass mixin, utilising a few of the handy functions in the Compass library.

What’s a mixin?

A mixin is a common component of the popular CSS pre-processor languages – Sass, Less, Stylus, etc. They all do mixins slightly different, but they achieve the same result. The most concise definition would be a parametric function which returns CSS rules. They are really helpful as they allow us to generate big, tasty chunks of dynamic CSS based on a handful of variable values. Essentially variables go in (colours, numbers, pixel values, etc) and CSS pops out.

Still scratching your head? Perhaps an example will help… Here is a simplified version of a handy mixin we use with Foundation. It’s a method for calculating the rem-value font-size and legacy fallback (pixel) font-size of a font:

/* $rem-base is a global variable set externally by Foundation
(in _settings.scss): */
$rem-base: 16px;

/* $legacy-support is a custom global set in _globals.scss */
$legacy-support: ie8;

/* In _mixins.scss: 
This mixin takes two parameters:
The first is the value we want to convert into rems 
The second is the base font value (used by the rem-calc function) - this is less likely to change, so we can set a default */
@mixin rem-font($pixel-value, $base-font-size:$rem-base) {

  /* If there is no unit, let's convert it to pixels */
  @if unitless($pixel-value) {
    $pixel-value: $pixel-value * 1px;
  }

  /* Use the legacy-support to decide whether 
  we want to include the pixel value */
  @if index($legacy-support, ie8) {
    font-size: $pixel-value;
  }
  /* Use Foundation's "rem-calc" function
  To get the value in rems */
  font-size: rem-calc($pixel-value, $base-font-size);
}

How to use it:

p {
  // Units are optional
  @include rem-font(18px);
}
// Outputs:
// p {
//   font-size: 18px;
//   font-size: 1.125rem;
// }

Why is this helpful?

  • It allows us to think and work in pixels, and generate best-practice relative units on the fly
  • It means we can support older browsers without rem-value support (and easily add/remove this support if necessary in the future)

This is a very simple mixin, and the complexity of mixins is limited only by imagination (and eventually computer processing power).

If you’re still struggling with mixins, check out the Sass mixin documentation. Or if you’re new to Sass/Compass and want to get started using them today, check out our quick tutorial for beginners.

Colour palette mixin

The idea behind this big mixin is to find a quick way to dynamically create a colour palette based on a single colour. It’s really targeted at non-creative types. I think it would be helpful for small, lightning-paced projects where there is no graphic designer input, no established brand and no time to put together a colour palette.

I’ve so far created four palette variations – analogous, monochromatic, triad and cross-complementary. There are various controls you can use to tinker with the colours, have a play around in the CodePen to get a better idea of how it works.

See the Gist if you want to ogle the Sass

Example implementation

Here is how we generate the colour palettes. By default, the mixin produces an Analogous colour palette. You can manipulate how the colours are generated by passing in specific variables. See the examples below:

// Our example base-color
$primary-color: #A9141A;

// Default settings (Analogous)
@include generate-color-palette($base-color: $primary-color);
// Monochromatic
@include generate-color-palette($base-color: $primary-color, $type: monochromatic, $class-name: 'monochrome', $darken:true, $base-factor:2.5%);
// Triad
@include generate-color-palette($base-color: $primary-color, $type: triad, $class-name: 'triad');
// Cross-complementary
@include generate-color-palette($base-color: $primary-color, $type: complementary, $class-name: 'complementary');

Dig around in the Gist to see all the configuration options.

The mixin can generate CSS rules by default, including button and link default, hover and active state colours. You can alternatively access specific colours in your palettes using a helper function and mixin. See this example below:

@include generate-color-palette($base-color: $primary-color, $type: triad, $class-name: 'triad', generate-css:false);
// Get a single color
// For example, the second color in the triad:
$triad-2: get-palette-color(2, "triad");

// Apply the background to your element
.custom-class {
  background-color: $triad-2;
}

// Get a button with the mixin
.custom-button {
  @include get-palette-button(2, "complementary");
}

Results

See the Pen MYwvdJ by Zing Design (@zingdesign) on CodePen.0

Limitations

This is something I whipped up in a few days, so there are a few limitations:

  • It relies on the Compass library
  • There are only four palette types to chose from, it would be good to have a few more options
  • At the moment, only Hue and brightness can be tinkered with, it would be cool to add a control for saturation too
  • It’s Sass, so it’s pre-processed before it gets to the server, it would be more helpful if it could run on the server and generate the palette based on user input. Basically, something like TinyColor.

I’ll keep working on it and improving the functionality!

People who have viewed this post also viewed

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text