I have been working at the Western Australian Museum for almost 4 years now, and the site has been through a lot of changes and so have I. I came from a world of small business websites/applications. Now I work on a site with hundreds of thousands of pages and my coding has developed rapidly in that time. Small errors or bad coding practices become dead end headaches.
So what have I learned? Well, SASS is amazing. Now I am no SASS expert but I have found a few ways to make it really work for me.
- mixins for colouring sections of a site.
mixins are like loops, I pass in two variables the page class and a rgb colour and then they populate a series of overrides to the base theme colour. For example on the museum site the header at the top of the page has a background colour of red but in the Perth section the colour is green.
To do this I call the colour override mixin with the class .perth and rgb value for Perth green and sets about 20 overrides for links background colours etc and in seconds I have themed the whole Perth section.
The best thing about using this method is that if I add a new module that needs theming overrides, I add the changes in the mixin and it updates everywhere. At the museum that means about 40 different colour overrides 1 for each of the 12 departments, 6 branches and many other.
- Codekit.
If you use SASS on a Mac buy Codekit.
Codekit monitors your .sass or .scss files and processes them into CSS files every time you save the .scss file.
It is so simple to set up and run you don’t have to know any magic code to get it working as it is all self contained and updates itself. It the drag and drop of SASS.
PS it also squishes image files saving bandwidth and increases website performance.
- Goldilocks and the three bears
This one is thanks to Chris Coyier of CSS-Tricks. Future proofing your media query breakpoints and using a mixin to call them throughout your code.
I have mixins called Goldilocks, Baby-bear, Mama-bear and Papa-bear and these equate to different browser widths. If in the future I need to change the breakpoint width I can update it in one place and it will update across all my CSS files.
- Splitting SASS files into multiple files
I use a combination of structure and type to spilt up one CSS file into multiple files and then importing them all back into one file at the end.
I have files for typography, layout, header, footer, styles and each of these is called into a global.scss file which is highly compressed and uploaded to the website as a single file for performance improvements by reducing the number of http requests.
- Don’t get too deep.
It can be easy to go mad nesting in SASS. Never go more than 3 levels deep otherwise you can end up 20 levels deep and you will want to start using IDs (NEVER EVER style with IDs) to override a simple class.
There is lots more you can do with SASS, and a lot of other lessons I have learned whilst working on a massive website and I will be writing about some of those soon.
