Compass Magick Tutorial - Part 2
There is more to Compass Magick than gradients and borders. In the second part of the tutorial series, we will go through the steps to create a simple 3-state button with an icon.
Recap of Part 1
In Part 1 we completed the tutorial with a simple button-like shape:
We generated the shape using linear gradients, corners and borders from Magick:
To ensure we can easily change the theme colours, we introduced two
$theme variables at the top of the file.
Adding an Icon to the Button
Pick an image and save it in your
icon.png. If you skipped Part 1 of this tutorial, make sure you have a directory named
images in your project’s root and add the following line to your Compass configuration:
Magick comes with a very handy
magick-compose function which allows us to put one canvas on top of another. We cannot pass the image file directly to
magick-compose as it will refuse anything other than a canvas object:
You’ve seen how to create a blank canvas using the
magick-canvas function. We can also initialise a canvas object in several other ways, one of which includes the option to load a file from disk:
Let’s put the two together for a working solution:
Adding the above line to our button code:
Yields the following result:
It’s not exactly what I would call pretty so let’s make some changes to the dimensions and colours of the button:
background-position property allows control over where a background image appears inside its container.
magick-compose gives us similar control. To offset the icon 5px horizontally and center it vertically, we pass
5px, 50% after the canvas object (note arguments are comma-separated):
Magick packs several pixel-based effects - fade, brightness, contrast, saturation, vibrance and greyscale. We apply them to a canvas object just like we would apply borders or corners:
The first argument selects the desired effect and the second one adjusts its strength.
For this tutorial, let’s tune down the icon by making it semi-transparent and reducing the colour intensity:
The effects are applied to the canvas we are composing on top of the button shape. If we move
magick-effect to the top-level canvas (where borders and corners are applied) then the entire button will be semi-transparent - not what we are after.
Sprites, the Compass Way
We are building a 3-state button. So far we have only constructed the code for our normal state. For the hover state, we simply remove the effects applied on the icon earlier. For the active state, we invert the gradient so the button appears pressed.
We could save the three states as three different images, but this is not good practise and it will result in three requests to the server.
The latest release of Compass offers an easy-to-use spriting support. You import the different button states and Compass takes care of the rest.
Let’s start by moving our button code from the
body CSS selector to a
$button_sprites Sass variable.
If we look at the generated CSS, it should be an empty file since there isn’t any code in the
button.png is still generated in
images_dir which is what we are after.
Before we proceed to out hover state, let’s rename the generated sprite from
'button/normal' which will generate a file
button/normal.png. This naming convention is compatible with Compass spriting.
For our hover state, we copy the code for the normal state and remove the effects on the button icon. Append the code to
We end up with two files:
Finally, copy the code for the hover state and play with the gradient stops to achieve a pressed button look. Append the code to
We are now ready to create a single image for our 3-state button. It is as easy as adding an
import line above the
Using the Button Sprite
The final step is to turn an
<a> element into a button:
button-sprite mixins are generated by Compass and allow us to easily switch the
background-position property to select the desired button state. The result is:
There are many more features available in Magick. Check out the list of all available commands for a comprehensive reference.
Leave a comment if you have any questions or suggestions and visit the official Github page of the project for up-to-date information and links to other resources.