As previously mentioned, Compass is a real swiss-army knife of a library, in that it contains all kinds of functionality that you can use. In this recipe, we're going to look at how you can use Compass to automatically include the relevant vendor prefixes, using a simple example of styling three buttons in a simulated form.
For this recipe, all we need is our text editor and Scout (there is a reason for using this, which I will explain later). I will assume you are using Sublime Text 2, which we installed earlier in this book. You will need to have the hex values for three colors to hand – you may already have some in mind, but if not, you can use an online site such as http://www.colorhexa.com/ to choose the hex codes for three colors.
We need to store our project somewhere, so let's create our workspace. Open up a command prompt and type the following command:
compass create vendor --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "javascripts" --images-dir "images"
This gives us a confirmation message that our project has been created. To confirm, open up Windows Explorer, and look for your vendor folder which is at the root of
C::
Let's now go ahead and create the template file – open Sublime Text 2 and add the following code to a copy of the template from the beginning of the book, and then save it as
vendorprefixes.html:<body> <form action="demo_form.php"> Username: <input type="text" name="username" /> <input type="submit" value="Submit" class="redbutton"/> </form> <p> <form action="demo_form.php"> Username: <input type="text" name="username" /> <input type="submit" value="Submit" class="rbbutton"/> </form> <p> <form action="demo_form.php"> Username: <input type="text" name="username" /> <input type="submit" value="Submit" class="grbutton"/> </form> </body>
You'll also need to add this to the
<head>section, so we can incorporate the compiled styles:<head> <link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/vendorprefixes.css"> </head>
We now need to provide the styles for the buttons. There's a good chunk of code required for this, so we'll go through it block by block, beginning with two source mixins:
@import "compass"; @mixin gradient($first, $second) { background: $second; background: -webkit-gradient(linear, left top, left bottom, from($first), to($second)); background: -moz- linear-gradient(top, $first, $second); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$first', endColorstr='$second'); }We now need to add in the mixin that will do the real work – this is the base for each button:
@mixin button_base { @include border-radius(.5em); @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); display: inline-block; zoom: 1; *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px 'Cookie', Arial, Helvetica; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); font-size: 20px; padding: .20em 1.0em .20em; &:hover { text-decoration: underline; } &:active { position: relative; top: 1px; } }This next mixin controls the styling and color to be used, as well as styles for hovering and marking the button as an active link:
@mixin defined_color ($color1) { color: lighten($color1, 10%); border: solid 1px darken($color1, 27%); background: darken($color1, 13%); @include gradient(darken($color1, 48%), darken($color1, 24%)); &:hover { background: darken($color1, 24%); @include gradient(darken($color1, 27%), darken($color1, 17%)); } &:active { color: darken($color1, 34%); @include gradient(darken($color1, 24%), darken($color1, 4%)); } }Now that we have defined our button styles, we need to pull all of the mixins together, so we can style each button accordingly:
input.redbutton { @include button_base; @include defined_color(#fae7e9); } input.rbbutton { @include button_base; @include defined_color(#BC8F8F); } input.grbutton { @include button_base; @include defined_color(#DAA520); }Save your work and preview it in a browser. If all is well, you should see something like the following screenshot:
The key to how this recipe works lies in how we've split off styles for each button into two parts – the base style, and the décor that defines each button's individual color. Think of it as baking a cake – the base style is the sponge layer, which will be the same throughout. We're making each resulting end style individual by adding different icing (or in this case, colors) on top.
To achieve this, we've used two mixins from the Compass library, border-radius and box-shadow. SASS then replaces each call for each mixin with the appropriate code from the Compass mixin library, during compilation:
input.redbutton { -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; -ms-border-radius: 0.5em; -o-border-radius: 0.5em; border-radius: 0.5em; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); display: inline-block; zoom: 1; *display: inline; vertical-align: baseline; margin: 0 2px; outline: none;
When designing this tutorial, I was tempted to use a third style from the Compass library, linear-gradient. However, I wasn't happy with how it worked, as it didn't appear to like using the darken() functions as part of the library call, and I didn't want to have to add a number of additional variables to get around this. I added my own version instead, it does serve to highlight that while there are lots of mixins available online, they won't necessarily fit your needs. Sometimes it is better to write your own!
Let's move on and turn our attention to using Compass to build another piece of functionality that is very popular – the ubiquitous slider that you will have seen on dozens of sites around the Internet.
