AWIA LogoFacebookGoogle Plusicon-codingicon-computericon-designicon-drawicon-drupalicon-maintenanceicon-mapicon-wordpressLinked InTwitter

I am constantly on the lookout to see what technologies are out there and which ones will be useful to me. All of my projects involve using cascading style sheets. Those style sheets have been getting bigger and bigger as I add more features. 

Now I use CSS for gradients when previously I used graphic files as background images.  Although the style sheets have been getting bigger, they’ve replaced gifs and png files.  The net result has been smaller total code. Then comes the question, how do you deal with large CSS files?

One option is to create a series of smaller CSS files and pull them together. That results in multiple http requests. This is not ideal for mobile devices. Maybe it would be good to have multiple files for development but pull them together for production sites.

I’ve found the most efficient way is to use a CSS preprocessor. Over the past few months, I have been using Compass and SASS to create and edit style sheets. SASS stands for Syntactically Awesome Style Sheets.  It is a means of compiling code into CSS. It has a lot in common with CSS. SASS will read your CSS.

SASS code can read CSS so you don't need to learn a new language to get you started. I use Compass and SASS to import the various files and export one single CSS file.

The press is quite simple. I make changes to my SCSS. As soon as I make the changes the “compass watch” command compiles it straight in CSS. Once I’ve finished the development phase and moved onto production, I edit my config.rb file to compile a minified version of the CSS. If I need to edit, I can go back to the SASS with comments, make the changes and compile again.

SASS makes use of variables.  An example is colour.  Often the same colour is repeated through a CSS file. You can set a variable for your base colour.  Compass is a library for SASS . It contains amongst other things functions for colour.  I can use Compass to lighten or darken the colours.  There is also a function that calculates complimentary colours.  With Compass, I can start with a base colour and calculate an entire palette.

SASS can be used to manipulate fonts. I can create a variable for a font stack. Instead of replacing the font stack throughout the whole CSS, I just change the font variables and hey presto, new fonts in my CSS.

SASS also has functions.  I can use it to calculate things like font sizes, grids and even colours. If I want to creat a series of font sizes based on the golden ratio, I can use s SASS function to do the maths.

 SASS has a number of useful libraries.  The main one I use is Compas. This can easily be done using the SASS library Compass.

It doesn’t stop there. Want fancy glassy buttons?  Would you prefer a flat look? Sassy Buttons can calculate the gradients & borders for you. Not only that, you will also get the CSS for specific browsers like Webkit and Mozilla.

There are also other preprocessors like LESS and Stylus. I won’t get into a debate about their merits. I am sure are many. I encourage you to check them out too. You may find them to be better suited to your needs. I find that SASS and Compass give me what I need.

Using a preprocessor like SASS has advantages like speeding up my workflow. I can keep snippets of code and reuse them. Using SASS and Compass allow me to make

Nowadays, I wouldn’t build a site without it.

Categories

Posts

All posts