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:


.someclass{
    color: grgb(150);
    border: solid grgb(50) 1px;
}

The compiled CSS looks like this:


.someclass{
    color: rgb(150, 150, 150);
    border: solid rgb(50, 50, 50) 1px;
}

Happy coding.

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

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

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.

Documentation

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

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:

// SASS (SCSS)
$myWidth: 5em;

#main {
  width: $myWidth;
}
// LESS
@myWidth: 5em;

#main {
  width: @myWidth;
}

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

Numbers

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;

Strings

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

Colours

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: http://mothereffinghsl.com/)

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

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

Booleans

eg: true, false

nulls

(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:

.main{
 @myVar: 100px;
 width:@myVar;
 @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)

Example:

.main{
 $myFontStack: arial, helvetica, sans-serif;
 font:12px $myFontStack;
}

Conclusion

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

Bourbon SASS

CSS frameworks tend to be very large and bloated. They can be very handy and if the performance downside wasn’t an issue id think they would be more popular on the web today.

Bourbon a SASS CSS framework has taken this problem and put it on its head. They are loading a comprehensive and very handy CSS framework as a SASS file. This include browser vendors prefixes, CSS Animations, Button styles and many other current CSS techniques. Normally you wouldn’t dare to add these CSS rules as your CSS would bloat to the size of a chocolate happy hippo. But with SASS these won’t be included and will only end up in your final CSS if used. Genius. I am now expecting a lot more of the these SASS frameworks to pop up as it solves a lot of CSS framework issues at present. Maybe even a CSS Preprocessor specifically designed for CSS frameworks might be present in the near future.

Button Example
To include a button style simple add the following line of code:

button { @include button; }