Being Smart with Colours in CSS/SCSS/LESS

I saw a question on reddit the other day about how professionals use colors in CSS. Having built a website or two for some of the top global brands I decided to detail what i believe as a good standard for professional color systems in CSS.

Use SCSS… No really.

The days of using CSS are gone. SCSS and LESS offer so much more. The techniques I use will all relate to SCSS but these can easily be adopted with any CSS pre processor.

RGBa, HSLa or HEX?

Regardless of what color system you use in SCSS or LESS all solid color’s get converted to hexadecimal colors. Also all color systems that have an alpha/transparency will convert to RGBa.

I personally like HSLa because of it’s no nonsense approach to naming and properties: Hue, Saturation, Lightness, Alpha. If you need to lighten a color all you need to do is increase or lower the percentage. I highly recommend visiting 

If using HSLa or RGBa when you define a non transparent color like: rgba(50, 50, 50, 1.0) sass will convert this to a HEX value. Sweet.

If you need to support Internet Explorer or below sadly you can’t use RGBa or HSLa. But on the upside because SASS and LESS converts HSL to HEX you can in fact use HSL with IE6. Bonus!

One last thing. In a professional environment when working with global brands, you will almost always be handed a style guide which you will have to adhere to. In this case you pretty much use what ever color system they suggest.

Variables, VARIABLES!

One of the great things that CSS pre processors introduced was variables in CSS. Finally. With colors I like to define only the main colors outlined in the style guide.

A style guide would normally give you 5 to 10 different colors. Naming should be memorable so developers can code without stoppage. Here is an example of the main variables for a fictitious brand. These would sit in the varibles.scss file in your project.

$navy: rgb(17, 47, 65);
$teal: rgb(6, 133, 135);
$saltWater: rgb(79, 185, 159);
$mustard: rgb(242, 177, 52);
$tangerine: rgb(237, 85, 59);


Note: Sass has a base set of pre-defined color variables. These can be seen here.

Now you have your base colors you will want variations of these transparent and solid. The best way is to use new variables that call the base color variables and apply one of the many SCSS functions:

This returns the Red component of a colour as a number. there is also a green() and blue()
example: red(#efffef); returns 239.

mix($color1, $color2, [$weight])
If you want to mix two colours together this is the function to use.
example: mix(red, yellow, 50%) returns #FF7F00

lighten($color, $amount)
This will darken a color by a percentage.
example: darken(white, 50%) will return gray

darken($color, $amount)
Like lighten() this does the opposite and lightens the colour.
example: lighten(black, 10%) returns #1a1a1a

This will return the complement color. It’s actual function is: adjust-hue(color, 180deg)
example: complement(green) returns purple

adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
This will adjust a colour by property.
example: adjust-color(blue, $blue: -100, $alpha: -0.5) will return rgba(0, 0, 155, 0.5)

This converts colors that can be understood by IE filters
example: ie-hex-str(green) will return #FF008000

There are many other functions that I have left out. They can be found here:

Example Brand Color Set

Below is what a color brand set would look like. With this setup if the company or yourself decide to change the main colors you only need to change the base colors and the rest will inherit from these variables. This really is a godsend for CSS.

// base colors
$navy: rgb(17, 47, 65);
$teal: rgb(6, 133, 135);
$saltWater: rgb(79, 185, 159);
$mustard: rgb(242, 177, 52);
$tangerine: rgb(237, 85, 59);

// darker base colors
$mustard-dark: darken($mustard, 15%);
$navy-dark: darken($navy, 15%);
$mustard-darker: darken($mustard, 20%);
$navy-darker: darken($navy, 20%);

// lighter base colors
$mustard-light: lighten($mustard, 25%);
$navy-light: darken($navy, 25%);
$mustard-lighter: lighten($mustard, 50%);
$navy-lighter: darken($navy, 50%);

// complementary colors
$navy-complementary: complement($navy);
$teal-complementary: complement($teal);
$saltWater-complementary: complement($saltWater);
$mustard-complementary: complement($mustard);
$tangerine-complementary: complement($tangerine);

Alternate colours are created with sass functions like Lighten or Darken to create shades and complementary colors sets.

When styling the site you can just use these color variables knowing that a color change is no hassle at all.

My suggestion be creative with your colours and embrace the functions that sass provides to change and manipulate the colors.

A basic CSS Grid layout with a few lines of SASS.

I’ve found rolling my own ‘Grids’ layout a much better option than using a framework. I’ve refined it down to this small bit of SCSS.

  @for $i from 1 through 12 {
    .grid-#{$i} {
      width: 100% / 12 * $i;
      float: left;
  clear: both

Then in your markup just define how many of the 12 grids you want the column to take up.

<div class="row">
    <div class="grid-6">Column A</div>
    <div class="grid-6">Column B</div>
<div class="row">
    <div class="grid-4">Column A</div>
    <div class="grid-4">Column B</div>
    <div class="grid-4">Column C</div>
<div class="row">
    <div class="grid-8">Column B</div>
    <div class="grid-4">Column C</div>

An example can be found here:

Chrome 38 Introduces a Responsive Design View

Chrome 38 has introduced a responsive design view in Chrome Developer tools. It allows you to view the available breakpoints for the loaded site. Clicking each of the bars resizes the window to the specified breakpoint or selecting the device will resize the window to that devices resolution.

As well as User Agent spoofing It also introduces network throttling to produce near real device simulations for development.

Chrome version 38 is available in Chrome Canary build.


Basic introduction to Express JS

Express is a web application framework for Node js. I will show you how you can get up and running with express in 5 mins.

First we need nodejs to run the application. You can download this here:

Next you will need to make a new directory where we will put our application.

$ mkdir boom

Go in there and create a package.json file where we will fill out the dependencies of this application. Take note at the express dependency. It’s best to get the latest version of express. You can find this out by going to

  "name": "boom",
  "description": "test app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "3.x"

After you have created the package.json you will need to install the projects dependencies with the following command in either terminal or command prompt.

$ npm install

You will see there is now a file named node_modules. This is ok. If you are using version control, be sure to add this as an ignored file.

Now we need to make the application. Create the following file: server.js in your project root and open it in a code editor of your choice.

First we create the application with express();

var express = require('express');
var app = express();

Now we define our routes with app.COMMAND. These are like urls the end user will see. You can see the various commands here. We will use the app.GET command in our script. This has two objects that are passed into the function request and response.

app.get('/hello.txt', function(req, res){
	var body = 'Hello World';
	res.setHeader('Content-Type', 'text/plain');
	res.setHeader('Content-Length', body.length);

You can see here we are sending the response back to the client with res.end(). We are also setting the Content-Type and Content-Length.

(OPTIONAL) We will assign one more route to make this app slightly exciting. Here we are use a request variable and displaying it in the response.

app.get('/user/:username', function(req, res){
        var body = 'Hello ' + req.params.username;
        res.setHeader('Content-Type', 'text/plain');
        res.setHeader('Content-Length', body.length);

We then use the app.listen method and assign a port.


Save that file and go back to your terminal or command prompt and start your server with the following:

$ node server.js

you can then navigate to the following http://localhost:3000/hello.txt and you will see your site running.

To see the second route we setup goto http://localhost:3000/user/yourname

MongoDB and jQuery in 10 Minutes.

MongoDB is an open source document-orientated database system. It’s part of the NoSQL family of database systems. MongoDB Stores structured data as a JSON-like documents. As a web developer this makes it soo much easier to work with the data with JavaScript.

So first up you will need to find a host that offers MongoDB hosting. There are a few out there. For this tutorial I will be using Mongolab. MongoLab offers a sandbox account with 500mb usage which is perfect for what you will be using it for. Also they have CORS enabled :)

Once you have signed up you will need to create a new database and choose a host. I will name mine Geolocation and host it on AWS, be sure to select the free sandbox account. Don’t add any user info for the moment. You should now see the below screen.


Click your ‘geolocation’ database to goto that databases dashboard. MongoDB groups it’s documents as collections. It calls these BSON documents. “BSON” is a portmanteau of the words “binary” and “JSON”. Think of BSON as a binary representation of JSON (JavaScript Object Notation) documents. Moving forward… Create a collection in your shiny new database. To do this click Add. Pretty simple. I named mine “boom” because lack of a better name.


Now click the “boom” collection to view its dashboard. We will need to get the api key from it. Once inside click the “Open Api view”. inside there you should see the Resource url. We need that. It should look like this with your api key:

Open up your favorite code editor and we’ll create a simple layout with twitter bootstrap because it’s awesome for prototyping stuff like this.  I’m using a Bootstrap CDN because it’s just easier.

So below we have a Button that when pressed Get’s the Geoposition object from the W3C Geolocation API.

So now we have some data we want to store, let’s store this in our newly created Mongo Database.

Below we have a standard jQuery Ajax post. The url is set to your newly created database with your own Api key.The data being an object needs to be stringified prior to being posted.

Now when you run this on a server when clicking the button you will see the data being sent to mongolab in Chrome dev tools.

Note: you cannot run this locally


When you check your MongoLabs DB you will see your database full of awesome data. When you browse to your API url you will have a json object that you can now use.


Below is a complete code example:

SASS Helpers: Grey RGB Helper

I found it annoying when defining grey RGB values in SASS you would repeat the same value three times.

rgb(150, 150, 150);

This annoyed me so I created a SCSS function as a helper to optimize my workflow.

The function is pretty straightforward. It grabs the value and returns the RGB value:

// returns grey RGB colours
@function grgb($greyScale) {
    @return rgb($greyScale, $greyScale, $greyScale);

Add this to your mixins file. Now when you define a Grey color do so like below:

    color: grgb(150);
    border: solid grgb(50) 1px;

The compiled CSS looks like this:

    color: rgb(150, 150, 150);
    border: solid rgb(50, 50, 50) 1px;

Happy coding.

JSON location api

A co-worker @scriptist found a super awesome way to get a users location via json. All the fancy location stuff is done on a server with IP addresses.
This simple json api let’s you grab a users geolocation details. Easy as pie.

Happy Friday.

Edit: I would use the HTML5 Geolocation API as your first option. As IP geolocation can have poor accuracy. If you must use IP based Geolocation look at the Google Maps Business Geolocation API. (paid service)

SCSS vs LESS. Part: 2 Nesting

SCSS vs LESS. Part: 2

Nested Rules

Nesting CSS rules can be handy in any web implementation. Rather than having many long CSS definitions you can simply use nested rules. This allows for visually clear inheritance in your code.

However, used incorrectly will see your compiled CSS have large chunks of over qualified CSS selectors in turn bloating your CSS by sizeable amounts and slowing down your website. eg.

.boom .bing .bam{
    color: hsl(0, 100%, 50%);
    color: hsl(0, 50%, 50%);

Above I require the ID #unique to be referenced in this section of CSS. This markup may look neat. However once compiled It will look like this:

.boom .bing .bam a {
  color: #ff0000;
.boom .bing .bam #unique {
  color: #bf4040;

As you can see the second rule is over qualified. The ID being unique can be used by itself. A bit of trap for preprocessor rookies. Also problematic to fix in large SCSS/LESS files.

Both SCSS and LESS have a very similar syntax for nesting. For chaining selectors use an ampersand. eg.

 // SCSS/LESS  .boom input{
 color: black;
   border: dotted red 1px;
   padding: 10px;
   background: red;

Will output as:

.boom input {
   color: black;
 .boom input[type="password"] {
   border: dotted red 1px;
 .boom input.large {
   padding: 10px;
 .boom input:hover {
   background: red;

SCSS allows you to use an ampersand to reference the nested parent anywhere in the nested selector. Where LESS only supports this as a first character as defined in the previous example.

//SCSS Only
a {
 color: red;
   text-decoration: underline;
 body.ie6 & {
   color: green;

This will allow you to reference Modernizr tags or Browser conditional Classes.

a {
 color: red;
 a:hover {
   text-decoration: underline;
 body.ie6 a {
   color: green;

Nested Properties

SCSS has a feature that is not supported by LESS and that is nested CSS properties. I’m a fan of shorthand properties. However this is a neat feature to have in the toolkit.

a:hover {
   property: font-size;
   duration: 4s;
   delay: 2s;
 font-size: 36px;

This allows you to nest any property with a dash (according to the documentation). The complied code is below:

a:hover {
 transition-property: font-size;
 transition-duration: 4s;
 transition-delay: 2s;
 font-size: 36px;


SCSS and LESS are almost identical in nesting their selectors. Apart from SCSS’s extra functionally with referencing the parent selector they are almost identical. That said, SCSS is much better at nesting with the added functionality of property nesting. SCSS is everything LESS is plus more. Winner: SASS (SCSS).

SCSS vs LESS. Part: 1

So I have been using LESS and SASS recently and I decided to write up a comprehensive post on them both. I will be gradually doing this as the languages are both very large.


SASS (Syntactically Awesome Stylesheets) appeared on the scene in 2007. First sporting a syntax that had very different markup from CSS (.SASS), It later released SCSS which is based on CSS markup. It is now a solid platform that is used widely among web developers. It’s latest release was two months ago (Version 3.2.3 – November 9, 2012).


LESS released it’s first iteration of it’s CSS preprocessor in 2009. It was heavily influenced by SASS (and still is. SCSS was also influenced by LESS). It’s syntax tries to be as close to CSS as possible. LESS also is wildly used.


The documentation on the LESS site is limited to one single very long page. To be honest, it’s shit. They seriously could have done a better job. In actual fact the entire LESS website is one page. If they want developers to take up their language give them a decent book to read. SASS on the other hand is no better. Again single page documentation. However it looks like they are starting to separate this as some documentation is on it’s own page. Apart from that they really need to setup a decent documentation site.


Variables are very similar in both languages apart from how you define them. SASS uses a Dollar sign($var) where LESS uses an ampersand (@var) they can be defined and used like below:

$myWidth: 5em;

#main {
  width: $myWidth;
@myWidth: 5em;

#main {
  width: @myWidth;

The variables in both cases handle the following types of values:


eg: 0, 0.1, 10px, 0.5em. (One thing to note, both languages round up negative values like .5em to a 0.5em). You can also do maths when defining your varible:

@test: 10 / (2 * 50) - 0.1;


e.g. "Boom"'Whoop', dang


When you define colors like red or blue LESS converts these to HEX values where SASS treats these as strings and leaves them alone. SASS however converts RGB variables to HEX values.

It’s nice that LESS is trying to be smart and all but I think when I define my colours as words I don’t want anything to change. Eg: if I define Blue or Teal it is for a reason.

What No HSL! That’s right. When Defining HSL colours both convert these to HEX values. Also when define HSLa value these get converted to RGBa. What. The. Fuck! (also:

// SASS and LESS [SCSS markup]
$myHSL: hsl(1, 100%, 50%);
$myHSLA: hsla(1, 100%, 50%, 0.5); 
  background: $myHSLA;

// output
.red {
  color: #ff0400;
  background: rgba(255, 4, 0, 0.5);


eg: true, false


(e.g. null)

Order of definition

One thing i noticed with LESS, when defining a variable twice or thrice it always uses the last definition inside that rule regardless of when it may be used, eg:

 @myVar: 100px;
 @myVar: 2em;
 height: @myVar;

would output to:

.main { width: 2em; height: 2em; }

Weird, A bug maybe?. SASS outputs the following:

.main {
  width: 100px;
  height: 2em;

Comma Separated Lists

eg: (item1, item2, item3)


 $myFontStack: arial, helvetica, sans-serif;
 font:12px $myFontStack;


I think they are so close I would not choose either based on these findings. If anything i’m leaning towards SASS because of the order of definition bug? It’s just weird. You would think they would follow how other main languages work.

Apart from that LESS and SASS both convert HSL and HSLa colours. It would be nice if neither tinkered with how I define my colours. If I want to set HSLA colours, LET ME SET HSLA COLOURS. Comprende? And don’t mess with the W3C pre defined colours! I use “Tan”, “Peru” and “Tomato” in all my websites!

Adam out!

SCSS vs LESS. Part: 2 Nesting

The Breakpoint Ep. 4 —The Tour De Timeline

The DevTools’ Timeline shows the heartbeat and health of your application’s performance. In this episode we’ll do a deep deep dive into how to uncover the cost of internal browser operations like parsing HTML, decoding images, invalidating layout geometry and painting to screen. Paul and Addy will show you how best to approach improving the performance of your CSS and JS.

The Breakpoint Ep 3: The Sourcemap Spectacular with Paul Irish and Addy Osmani

Take Coffeescript to Javascript to Minified and all the way back with source maps. In addition to a new Coffeescript sourcemap workflow, we’ll cover the latest sourcemap updates so you can understand how to dramatically improve your debugging experience. Finally, Paul and Addy will be joined by special guest—Yeoman core contributor Sindre Sorhus—to discuss what big new changes are coming to the project.

Chrome Developer Tools: Sources Panel

You may have noticed a new panel appear in the Chrome Developer Tools. The sources panel was recently added to the already powerful web development tool. The sources provides you with the source code of your website. It allows you to edit your website on the fly.

One of the main features includes the ability to save revisions of your source code allowing you to track your changes and revert to a previous version of a source file. When you edit your source simply pressing ‘Ctrl + S’ will create a revision. You can then right click the file you just saved on the left hand sources panel and click ‘Local modifications’ to see your revisions. You will see all your saved revisions with timestamps and revert links.

Another nice feature is the ability to save an edited source file locally to your hard drive. This pretty much opens Google Chrome as a stand alone web development tool.

While in the sources panel if you press ‘Ctrl + F’ you will see a standard find tool with Find and Replace functionality. Which is nice to have.

A nice new tool is the ‘Pretty Print’ button (The two curly brackets button) which basically converts your minified source code to readable and editable code.

There are many more features in the sources panel that I have not covered. I think for any web developer this is a must ’Try out’ feature.

Why every web developer should join the Mozilla Developer Network (MDN)

Documentation is essential for learning web developers. Most new developers pop over to sitepoint or buy a book from O’Reilly. But I’m offering another option. Some new developers even head over to thinking its affiliated with the w3c, which it’s not (check out Either way there are many libraries on-line however none are really affiliated with a major body. Except MDN.

The Mozilla Developer Network (MDN) is an excellent source for budding web developers. It covers all of the main areas for web development including one of the best JavaScript guides on-line. Being affiliated with Mozilla, the creator of Firefox means they will always be focused on the web.

So why should I join the MDN? Well one of the great things about the MDN reference site is that it’s an editable Wiki. Meaning you can add to the documentation, you can contribute to the learning of new web developers. The slogan that sits at the top of the home page “It’s the Web. You drive.” sums it up nicely. I signed up and within minutes I had the power to edit any documentation on the site.

So sign up, contribute, spread the word and let us make this the authority source for learning.

!important; the bane of CSS.

I was recently equally surprised and relived when I read that the WordPress UI team is clamping down on the !important; rule in Their CSS. A recent post outlines that any use of the !important; rule needs to be raised and approved in their weekly meeting. This is great. We should follow.

I found the !important rule became popular when web developers were working on older software products, websites that used in-line styles as a form of styling. That was the 90′s. I also found high use of the !important rule with lazy and incorrectly trained web developers.

There is nothing more annoying that stacking up a massive CSS selector just to get around an !important rule just so you can make a minor adjustment to some text.

#iNeedAnID #oneMore li.almostThere header nav li{font-weight:bold !important}

So what I like to do is use a Specificity Calculator in times of need, trying to remove !important; rules that look lazy or no longer needed. It is a some what satisfying challenge doing this because the end result is clean code and Web Developers love clean code.

How does CSS Specificity work? Well i’m not going into that so I’ve listed a few links that go into extreme detail about the subject:

SASS Comments: Comment all you like. No really.

I first encountered these zero comment CSS stylesheets about a month ago. At first I was like “what is going on here? Why no comments!”. It was a bit weird, I felt lost in the code. Then I thought about it and figured out that they were using SASS or LESS to output their CSS and were really extensively commenting their CSS. With SASS you can comment using the notation used in javascript and these comments don’t get outputted in the resulting CSS file.

// this Comment in SASS will never reach the web.

Since this realisation about SASS comments being so awesome, I too have been leaving zero comments. First it indicates that this is a CSS Preprocessor output file and that you should probably update the original rather than this file unless you want some angry dev monkey swinging by. It also means you can extensively comment your CSS with Bug Tracking Numbers, Client commentary on certain styles, Bug fixes, Iteration maintenance tasks. Really now you can read the whole story about the websites style without any loss in performance.

So what do we do with Opera?

So what do we do with Opera? In this world of the ever evolving browser wars. Here we have a browser that is always out smarting the popular browsers with its cutting edge developments. Normally it serves as an inspiration of what we can expect in the popular browsers, however it lacks major browser share. At 2.2% (August 2012) you would think it was a lost cause. Wrong! It actually has over 270 million users world wide [1].

So one use I find perfect for Opera is using it as a finely tuned work tool. When you think of browsing the web, it normally entails checking out a local news site, Watching some pelvic thrusting cats and seeing what your eccentric Aunt is up to on Facederp. But some people actually do work inside a web browser. Really! For those of you who use a browser for work, you  will want something fast, very fast. Also you will want something separate from the browser you normally use Facederp on. Opera is the perfect work browser. Its fast, it hardly breaks and it’s completely separate to your personal browser. So you don’t need to worry about Bookmarks syncing to your home computer or what not. Even having a different icon is beneficial as this allows faster program switching. So give Opera a try as your work browser.

Why I think is good for the web.

So a friend sent me a quick link to a neat JavaScript CSS3 game. It was built in My first thoughts were “Cute game” but when I investigated the website I learned how important it could be for new web developers learning new frameworks and in turn make the web better.

CSSDeck allows you to write up a website in seconds similar to JSfiddle and have it visible to the world. It allows you to write in popular CSS preprocessors like  LESS and SASS as well as Javascript frameworks like Coffeescript. The Snippets are voted on and comments can be made.

The real genius thing about it is anyone can then edit your code. So we now have collaboration for these little titbits of CSS/HTML. Other dev’s come in and add there little magic and Boom! we have a hiving developer network.

After signing up to the service, I saw a calendar of all things and started adding my Front end dev love to it. Showing the user the best possible method for creating a Calendar with CSS/HTML. Now its not just limited to small little things like that. There are full blown web applications in this place using 3D and webGL that I have no doubt a number of users have contributed too.

Below is a link to the popular items on the site: