Paul Cowan

Nomadic cattle rustler and inventor of the electric lasso

Creating Gradients With Compass and SASS

Previous Posts

In the previous two posts, I have started to outline the transition of my yet to be completed product from old school xhtml, css and javascript into the new world of HTML5 and CSS3. As the product is not even on the market yet, I am taking the bold step of tackling the design myself. I am a css and design heretic so this is quite a difficult step for me. On the plus side, I will learn a lot on the way no matter what the outcome is. In this article, I want to touch on creating gradients with sass and compass.

A gradient in the context of css is a gradual transition between two colours. This transition can be transformed through a vertical axis or a horizontal axis. Below is how my application looks after I have applied the styles that I will create in this article.
I have applied gradients to both the header section and the navigation bar of the html document. CSS3 comes with a gradient property and most of the modern browsers have their own prefixed slants on this property. As we are using compass and sass, we can forget about the need to create these vendor specific duplicated linear-gradient properties. Yet another reason for using compass is that compass will output the vendor specific cross browser rules. The latest version of compass has the excellent images module and I am going to take advantage of the background-image mixin to create the gradient effect. Below is the rule that will be applied to the new html5 <header> element of our document:

1
2
3
body > header
  background-color: $header-bg
  @include background-image(image-url('noise.png'), linear-gradient(darken($header-bg, 20), $header-bg, lighten($header-bg, 11)))

I am using the background-image mixin to generate the linear-gradient as recommended in the latest compass docs changelog which states:

The linear-gradient and radial-gradient mixins have been deprecated. Instead use the background-image mixin and pass it a gradient function. The deprecation warning will print out the correct call for you to use.

We are also passing in a fallback image if the browser does not support linear-gradient.

For IE6 and IE7 there is the filter-gradient mixin. I will probably create an IE < 8 conditional stylesheet and try this out at a later stage.

It is also worth noting that we are taking advantage of the sass functions lighten and darken to avoid having multiple colour hex values to change. The above background-image mixin will generate the following css:

1
2
3
4
5
6
7
8
9
10
/* line 1, /Users/paulcowan/projects/leadcapturer/app/assets/stylesheets/partials/_header.sass */
body > header {
  background-color: #6a85af;
  background-image: url(/assets/noise.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #acbbd3), color-stop(50%, #6a85af), color-stop(100%, #4f6992));
  background-image: url(/assets/noise.png), -webkit-linear-gradient(#acbbd3, #6a85af, #4f6992);
  background-image: url(/assets/noise.png), -moz-linear-gradient(#acbbd3, #6a85af, #4f6992);
  background-image: url(/assets/noise.png), -o-linear-gradient(#acbbd3, #6a85af, #4f6992);
  background-image: url(/assets/noise.png), -ms-linear-gradient(#acbbd3, #6a85af, #4f6992);
  background-image: url(/assets/noise.png), linear-gradient(#acbbd3, #6a85af, #4f6992);
}

I hope you can see the projection of one line of vendor independent compass/sass code to the many lines of browser/vendor specific css code.

Navigation Bar

We will use the same technique to apply a gradient to the navigation bar: We are going to use the new semantic <nav> element of html5 to mark up the navigation and then apply css rules to it. Below is the haml for the new navigation bar:

And here is the rendered output of the above haml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav role="navigation">
    <ul role="user">
      <li>
        <a href="/logout">log Out</a>
      </li>
    </ul>
    <ul role="main-navigation">
      <li>
        <a href="/Home/Index" data-method="get">Capture</a>
      </li>
      <li>
        <a href="/Archive/Index" data-method="get">Archives</a>
      </li>
    </ul>
</nav>

I am also using the new html5 semantic role attribute. HTML5 has many of these new semantic markers that help devices such as screen readers pick out the relevant sections.

I want to take this opportunity to show the power of both sass variables and the extremely useful sass functions desaturate, darken and lighten to DRY up your css. Below are the variable declarations we will be using for the navigation bar:

Only on line 1 do we actually specify any hex value for a variable, in the subsequent variable declarations, we pass in relevant percentage values to the lighten and darken functions to keep everything in ratio. A change to the $nav-bg variable will cause the other variables to adjust accordingly.

A full list of similar sass colour functions can be found here.

Below is the listing for the _navigation.sass partial file that contains the rules for the <nav> tag outlined above:

Besides the background-image mixin on line 4 that I described previously, we are taking advantage of a couple of other useful sass mixins:

  • Horizontal List (line 11): which transforms a <ul> list horizontally.
  • link-colors (line 20): Which sets the colors for a link in one mixin.

I will leave things here for this post but in the next post I will describe the layout I am going to use for the main section of the page. I had previously used the compass blueprint library which is a css grid layout framework but the world has moved on and I am going to see what else is available. If anyone can recommend a more modern approach please leave a comment below.

Please leave any comments below. Feedback is always appreciated.

Comments