Line25

Getting Started with the Sass Preprocessor

Read the full post

Preprocessors are a popular way of simplifying and writing more manageable CSS, as well as making use of frameworks to write better CSS. Let’s take a look at the basics and learn how to create a fully loaded CSS3 button with gradients, shadows and transitions while making use of the Sass preprocessor and Compass framework to do all the hard work for us.

Wait, Prepro-wha?!

I guess if you’re new to this, the sound of ‘CSS Preprocessor’ is confusing! But rest assured, it’s nothing big to worry about. A CSS Preprocessor takes your CSS written in a specific file, compiles it, and writes out your CSS into a separate file. It helps for writing your CSS in a developer-friendly way, but can also help simplify and manage your CSS better.

CSS3 button made with Sass and Compass

In this tutorial we will be making a very simple button with 3 states, full of awesome CSS3 features like gradients, box shadows and transitions, while relying on the preprocessor to do the hard work for us. There are a few preprocessor languages out there, but I highly recommend using Sass and the popular framework built from it, Compass. Sass can be used to structure our CSS, while we can use Compass to beef up our styles and provide fallbacks.

View the CSS3 Button Demo

What you need and how to get started

The first thing to do is get a program to help compile your code, and while you could install everything by command line, it’s easier to keep control of it using a compiling application. I highly recommend trying out CodeKit for this tutorial, so grab a trial copy and we can get started.

Make a folder for our project, complete with a index.html file ready to put some code in. Next, enter CodeKit, go to the File menu and select ‘New Compass Project’. You will then be presented with a dialog box asking where your project folder is located and where to compile to, and make sure it is set to the following.

Compass Configuration

What we’ve set up is where our Sass files are located, where they compile to, and how Compass will write out the CSS. Here, I’ve set it to the expanded view so I can see how my CSS looks, while setting it to compressed will minify the CSS. It’s up to you how you want to organise your project. Compass will then create the project, as well as the location of our CSS and Sass folders.

Compass Configuration Result

Getting started with the Sass code

In our HTML file, all we need is some very simple code, and a link to our CSS file in the CSS folder of our project.

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Simple CSS3 Button</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="container">

	<a class="button">Click Me!</a>

</div>
</body>
</html>

That’s all the HTML we need! Now, onto writing with Sass. Enter your preferred text editor, and make a new file, save it into the sass folder, and name it style.scss. We’re going to be writing everything out in SCSS, which Sass can also process, to keep things simple and SCSS isn’t as strict on the beginners. :-)

At the start of our file, we will write out a basic reset for the HTML, an import for Compass, and write out our colour variables for the button.

@import "compass";

//Simple Reset
body, div, a {
	margin: 0;
	padding: 0;
	border: 0;
}

a {text-decoration: none;}

a:focus {outline: 0;}

//Colour Variables
$button-colour: #2e6bc6;
$button-start: #37a0dc;
$button-stop: #2068a6;
$border: #163861;
$text-shadow: #06304b;

//Hover colours
$button-hover-colour: #2e7dc6;
$button-hover-start: #3f9ff0;
$button-hover-stop: #2874a9;
$focus-shadow: #0b3c5f;

//Main Styles
body {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
	

At the top of the file, we’re calling on Compass to be included into the file so we can make use of some mixins for later. We’ve also written a simple reset, and we’ve made use of one feature already: variables. This allows use to store values we will constantly use in our CSS, including colours, font values, and more! Here, I’m using it to store the colours used on the button to simplify writing them out but also for re-use throughout the stylesheet.

Styling the Button


.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;
}
	

Onto styling that button! We’ll start off by applying the base styles to the a tag with the class of button. Here I’ve set the base styles for the button, and notice how I am making use of the variables from earlier.

Now, onto the fun part! Remember the Compass import placed at the beginning of the Stylesheet? Here we make use of it, as Compass has a mass library of built-in mixins, which include CSS3 prefixes for browsers that still need prefix support.

.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;

	//Compass Mixins
	@include background(
		$button-colour
		linear-gradient(top, $button-start 20%, $button-stop)
	);
	@include border-radius(3px);
	@include box-shadow(inset 0 1px 0 rgba(#fff, 0.8));
	@include transition(all 0.3s ease);
}
	

After the initial styling, we can include some mixins for the background colours, linear gradients, border radiuses and transitions. The best part is it will compile with only the necessary prefixes, and save us from writing them all! The class so far will compile into the following in the style.css file.

.button {
  width: 158px;
  height: 30px;
  margin: 120px auto;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  display: block;
  color: #fff;
  padding: 7px 0 0;
  border: 1px solid #163861;
  text-shadow: 0 -1px 0 #06304b;
  position: relative;
  background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
	

Writing Styles with Nested Elements

Another great feature of a Preprocessor like Sass is the ability to nest elements and appending classes with a parent element you’re styling. This is then compiled into the necessary CSS to make it work.

.button {
	...
	
	&:hover {
		@include background(
			$button-hover-colour
			linear-gradient(top, $button-hover-start 20%, $button-hover-stop)
		);
		@include box-shadow(inset 0 1px 1px rgba(#fff, 0.95));
	}
	
	&:active {
		@include background(
			linear-gradient(bottom, $button-start 20%, $button-stop)
		);
		text-shadow: 0 1px 0px $text-shadow;
		@include box-shadow(inset 0 2px 8px $focus-shadow);
	}
}
	

After the main button styles, we can nest the pseudo-class selectors for the element’s :hover and :active states, with the ampersand to tell Sass that it’s a nested class appended to the parent element. In the :hover state, we can add a little bit more emphasis to the gradient and inner shadow using Compass Mixins, while the :active state reverses the gradient and changes the box shadow to give the impression that the button is pushed in.

.button:hover {
  background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9));
  background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.button:active {
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: linear-gradient(bottom, #37a0dc 20%, #2068a6);
  text-shadow: 0 1px 0px #06304b;
  -webkit-box-shadow: inset 0 2px 8px #0b3c5f;
  -moz-box-shadow: inset 0 2px 8px #0b3c5f;
  box-shadow: inset 0 2px 8px #0b3c5f;
}
	

The above is what happens after the :active and :hover states are compiled by Sass; they are written as pseudo-class selectors to the parent element in valid CSS, as well as the desired CSS complete with fallbacks, completing our 3-state button.

CSS3 button made with Sass and Compass

View the final CSS3 Button Demo

The style.scss file and compiled Stylesheet

Full SCSS Stylesheet

This is all that is written in our whole style.scss file, as we have an organised file which is written simply, as well as carrying mixins and variables that do some of the work for us, which then compiles into the final style.css file Stylesheet.

Final CSS Stylesheet

Learning more about Preprocessors

Hopefully this hasn’t been too much of a headache, and has given you the ambition to write more in Sass and Compass, as well as try CSS Preprocessors. There are many great articles by CSS-Tricks, NetTuts, The Sass Way, and many more on the subject to help you on your way to write more efficient, simple and easier CSS.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Iain MacDonald

Iain MacDonald is a Front End Designer and Developer from Glasgow, Scotland, now living in England. He likes clean code, functionality, and vibrant design. You can find Iain on Twitter, Dribbble or at his Website.

17 Comments

  1. reader says:

    You do all this work and then your client asks why doesn’t it work on IE (on latest IE actually) and then you re-do all that with .png background instead.

    People, stick to the solutions that work on all major browsers, because average client doesn’t give a single f*ck about what CSS3 is.

    No offense, great tutorial. But a waste from technical side and time consuming.

    • Tim Smith says:

      It’s a shame you feel that way. From a technical standpoint, using Sass can save you a lot of time. From a client perspective, well, the CSS will work however you wrote it to work.

      Give it a shot. I was at once skeptical as well.

    • I wouldn’t really consider it a waste. With preprocessing, this might seem like “all this work”, when in reality it saves a ton of time from a coding perspective.

      also, you are more than capable of coding in .png fallbacks for unsupported browsers.

      and the filesize/speed advantages of pure code can add up quite quickly depending on the amount of images it is replacing and what type of network the user is visiting from.

  2. Abrishca says:

    Excellent tutorial to get started with Sass – it doesn’t look so scary when you’re just looking at a small element rather than a full website.

  3. Pixeladed says:

    Hmmm, maybe make a comparison between {less} and Sass? That would be interesting. Which one is better?

  4. Catalin Rosu says:

    I just can’t believe the above CSS reset example. It’s “simple” wrong.

  5. jubs says:

    If you don’t start using some sort of preprocessors in your workflow, you’re going to end up getting phased out of the industry in the very near future.

  6. Jay says:

    This tutorial is assuming we all use Macs as Codekit is a Mac only app.

    Pretty sloppy not to mention this or suggest an alternative for Windows users.

    And I’m sorry but the that is an ugly looking button.

  7. Otto Rask says:

    “… while you could install everything by command line …”, and why not give any directions as to how? Also giving a Mac-only software suggestion. Not every front-end developer uses Mac, nor hates the command line. ;)

    (Yes I know how to use Google, just mentioning that for future posts maybe give out some concrete alternatives for your readers.)

    For Sass-basics this was good, thanks. :)

  8. Steve says:

    Nice intro here on how to use Sass, but seems to assume prior knowledge on the set-up, what a CSS preprocessor is/does.

    Maybe a bit more direction on the mechanics of a preprocessor, how to install etc, would be useful? Appreciate use of codekit, but would be great to see you explain the command line side of things in the same manner you have written the rest of the tut. Cheers :)

  9. Adam says:

    Whew! Iain looks like you’ve got a tough audience here on Line25. I like how you kept it simple for those readers who maybe have heard about SASS but arent sure how to get started.

    With that said I do agree with some of the others that maybe suggesting some alternatives besides CodeKit would have been nice. I wish I could use CodeKit, as it does look pretty nice. But since I prefer Windows for work I run Fire.app instead which also gets the job done quite well.

  10. ashish says:

    hi here’s ashish i wanted to ask u that what r api’s and plugins
    please help me out!!!!!!!!!!!!

  11. That’s pretty cool! a lot better than other ones I have seen, will try it out, thanks!

  12. Cheers author for your self discovery and wonderful story. You are a really talented writer, Great content and the article was very informative. That is an awesome post instead. I think, this post will surpass others I’ve seen as its writing techniques and distinctive quality can attract the readers. Thanks.

  13. Sam Jarvis says:

    For Windows users, http://alphapixels.com/prepros is a fantastic alternative to CodeKit and will handle all sorts of preprocessing tasks.

Comments are now closed