Important Notice

Due to the rapid changes in web design, some links and references in this page are no longer valid. Please accept my apologies.

I will be updating the page soon, please come back!

Getting Ready for Sass

Pre-Amble

For quite some time, I have been looking at a CSS preprocessor. The problem was that both LESS and Sass required installing npm (the node package manager) for the former or Ruby for the latter. Both packages had to be deployed using the command line interface. Even though I had gone through the stages of using CPM and DOS, I could not see myself going backwards.

Along comes the Compass.app. Yes, there are other applications that can be used and I did try a couple of them; but it was the Compass.app that started me going and well for two reasons:

This is what you will finish up with if you follow the instructions below.

Please Note: This article was written in January 2013 when Foundation 3 was the current version and before installing Dreamweaver CC.

Why a CSS Preprocessor

Actually there are ten good reasons why you should be using a CSS preprocessor. I will merely mention the points without going into depth.

  1. It adds the stuff that should have been in CSS in the first place.
  2. It will save you having to repeat yourself.
  3. It will save you time.
  4. It will be easier to maintain.
  5. It will make the CSS more structured.
  6. It is (now) easy to set up.
  7. It will make your websites prettier.
  8. It's very easy to write.
  9. Frameworks like Compass (not the app), Foundation, Blueprint and Suzy will supercharge your CSS.
  10. It's fun!

Installing the Compass.app

Go to the Compass.app web site, pay $10, download and unzip to anywhere. The program works without having to install it. Don't forget its location because you will need this to run the application.

That takes care of care of Dreamweaver and we are ready to start with a project.

Start a New Project

Go to where you have placed the Compass.app and double click compass-app.exe. After a few moments a blue coloured compass icon will show in the task bar. Click on the icon to expose the following menu

Choose 'Create Compass Project-->foundation-->project. This will show the following screen

I have chosen the Foundation framework because I found this the most exciting. The other frameworks will not be discussed here.

Make sure that you are in the root directory (www) and type the name of the new project and click 'Save'. After a few moments, the Compass-app icon will turn red signifying that it is already monitoring the new site. However, the site still has to be setup in Dreamweaver.

Working with the New Project

Opening the new project in Dreamweaver will reveal the following files and folder. These have been created by the Compass-app. At this stage, we will accept the default names, although they can be renamed, but requires reconfiguring 'config.rb'

The yellow highlighted parts pertain to Sass and Foundation, the pink coloured part is the CSS file that will be automatically created.

NOTE: Do not edit the CSS file. From now on you will only edit a SCSS file.

View the index file (index.html) in your favourite browser and, after having read its contents, change the width of the browser window. This is magic!

Using Foundation Templates

Go to the Foundation HTML Templates section and click on 'See HTML' for the fifth (Orbit Home) template. In the modal window click 'View Raw'. Select and copy all of the mark-up.

Open 'index.html' in code view in Dreamweaver (if it isn't already open) and highlight all between the opening BODY tag and the first link to a JavaScript file, then paste the newly acquired code in its place.

At the end of the newly paste code you will see

<!-- Put this above your </body> tag -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').orbit();
});
</script>

Cut and paste this just above the </body> tag.

Now view in your favourite browser.

Adding your own Styles

To add your own style rules, create a new file in the sass folder called _theme.scss or similar. Make sure the file-name is preceded by an underscore, otherwise you will finish up with more than one CSS file. Then in app.scss add @import "theme"; (no underscore) to the very end of the document.

When a change is made in any of the SCSS files, Compass-app will automatically recompile the CSS file.

Conclusion

This is exciting stuff. I have merely touched the surface.

Rapid prototyping, easily configured sprites, browser compatibility, responsive design, minimised CSS just to name a few of the benefits.