Sass or Less

Using Extensible CSS Preprocessor Languages: Sass or LESS

What are Extensible CSS Preprocessor Languages?

Sass or Less
So you’re probably wondering to yourself: What are these extensible CSS preprocessor languages and why should I use them? You might also be asking to yourself, why I should even learn a new way of writing CSS when I already know how to write it well? The answer is simple… It’ll make you write CSS even faster, more proficient, and will also let you split up your CSS so you can re-use some of it in another section of your site without having to re-write your CSS again.But before, we dive into the nitty gritty of extensible CSS preprocessor languages, let’s find out what they are and how they are used.

There are a few different ones out there but the two major extensible CSS preprocessor languages for CSS are Sass (Syntatically Awesome Stylesheets) and LESS (The Dynamic Styesheet Language).

Let’s take a look as some of the similarities and differences between the two to get a better understanding of how each language handles CSS.

Sass

Sass
Sass has been around longer than LESS and has slightly a few more features that may be useful to web designers. There are two different syntaxes when using Sass and both are valid to use. They are differentiated by an extension of the file: “.sass” and “.scss”

There are no functional differences between the two syntaxes except for how it is written. “.sass” files (the older syntax) uses indents/tab spaces (similar to HAML) for its syntax usage which some prefer for it’s conciseness. The other syntax “.scss” is much more commonly used and uses the same basic CSS syntax using brackets and is less concise. For this article, I’ll mainly be talking about using the “.scss” extension syntax as it is similar to writing normal CSS and has a similar syntax to LESS as well.

Here are a few features that encompass the Sass language:

Variables

Variables can be used to hold specific values that you can reuse later on and throughout your Sass file(s). They are applied by using the dollar sign ($). Here’s some examples of using variables.

[CSS]
$red: #ff0000;
$lineheight: 1.4em;
p {
color: $red;
line-height: $lineheight;
}
[/CSS]
The output will be:
[CSS]
p {
color: #ff0000;
line-height: 1.4em;
}
[/CSS]

Comments

There are now two ways to use comments within your Sass files instead of using the normal /* */ syntax in CSS.
[CSS]
// this is a comment and won’t show up on the compiled CSS file
/* this is the normal
two line comment */
p {
color: #333; //dark color
}
[/CSS]
And here is the output
[CSS]
p {
color: #333;
}
[/CSS]

Nesting

Nesting is the most useful feature for CSS preprocessor languages as it is easier to avoid repetition by nesting selectors within one another.
[CSS]
.content {
margin: 10px;

h1 {
font-size: 2em;

a {
color: #0000ff;

&:hover {
color: #000099;
}
}
}
}
[/CSS]
And here is the output:
[CSS]
.content {
margin: 10px;
}
.content h1 {
font-size: 2em;
}
.content h1 a {
color: #0000ff;
}
.content h1 a:hover {
color: #000099;
}
[/CSS]

Mixins

Mixins are extremely useful if you constantly need to write large chunks of code and re-use them. Below is an example of a background gradient being applied using a mixin called gradient-vertical() with values set as default. Notice how there are three default values set as variables within the mixin itself which can be overwritten.

[CSS]
@mixin gradient-vertical($startColor: #555, $endColor: #333, $noGradient: #444){
background: $noGradient;
background: -moz-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // FF 3.6+
background: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)) repeat-x mix($startColor, $endColor, 60%); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Opera 11.10
background: linear-gradient(to bottom, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Standard, IE10
}

.content {
@include gradient-vertical();
}
.blueBox {
@include gradient-vertical(#40a3db, #0c78b7, #228ac6);
}
[/CSS]

Here’s the output
[CSS]
.content {
background: #444444;
background: -moz-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333)) repeat-x #474747;
background: -webkit-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: -o-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: linear-gradient(to bottom, #555555, #333333) repeat-x #474747;
}

.blueBox {
background: #228ac6;
background: -moz-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#40a3db), to(#0c78b7)) repeat-x #2b91cc;
background: -webkit-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: -o-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: linear-gradient(to bottom, #40a3db, #0c78b7) repeat-x #2b91cc;
}
[/CSS]

Inheritance through extends

Sass allows you to inherit all the styles of a selector and apply it to another one using the @extend method.

[CSS]
.content {
background: #ccc;
color: #333;
}
.container {
@extend .content;
width: 1000px;
}
[/CSS]

Here’s the output:
[CSS]
.content {
background: #ccc;
color: #333;
}
.container {
background: #ccc;
color: #333;
width: 1000px;
}
[/CSS]

Anything Else?

Well there are many more features that Sass includes including functions, math operations, control directives, and many more. The ones that I’ve shown are the most commonly used, but you can view more about Sass’s features at www.sass-lang.com

LESS

Less
LESS is very similar to Sass and has a fairly good amount of features. One of the huge differences with LESS is its syntax usage of the “@” symbol for use as the variable denotation. Also, there are slight differences between how mixins are called and how inheritance is denoted.

Variables

Much like Sass, variables are used to hold values for later use. Here’s an example of how to use variables in LESS:

[CSS]
@red: #ff0000;
@lineheight: 1.4em;
p {
color: @red;
line-height: @lineheight;
}
[/CSS]
The output will be:
[CSS]
p {
color: #ff0000;
line-height: 1.4em;
}
[/CSS]

Notice however, that LESS uses the “@variable-name” followed by a colon (:) instead of an equal sign (=) to apply its value as opposed to Sass.

Comments

Comments in LESS are used the same way they are used in Sass. There is no difference.

[CSS]
// this is a comment and won’t show up on the compiled CSS file
/* this is the normal
two line comment */
p {
color: #333; //dark color
}
[/CSS]
And here is the output:
[CSS]
p {
color: #333;
}
[/CSS]

Nesting

Nesting is also used the exact same way in LESS as it is in Sass.

[CSS]
.content {
margin: 10px;

h1 {
font-size: 2em;

a {
color: #0000ff;

&:hover {
color: #000099;
}
}
}
}
[/CSS]
And here is the output
[CSS]
.content {
margin: 10px;
}
.content h1 {
font-size: 2em;
}
.content h1 a {
color: #0000ff;
}
.content h1 a:hover {
color: #000099;
}
[/CSS]

Mixins

Mixins are used slightly different in LESS as they are in Sass. You’ll notice that calling a mixin in LESS is just declaring its selector as opposed to calling the “@include” in Sass. Here’s an example:

[CSS]
.gradient-vertical(@startColor: #555, @endColor: #333, @noGradient: #444){
background: @noGradient;
background: -moz-linear-gradient(top, @startColor, @endColor) repeat-x mix(@startColor, @endColor, 60%); // FF 3.6+
background: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)) repeat-x mix(@startColor, @endColor, 60%); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(top, @startColor, @endColor) repeat-x mix(@startColor, @endColor, 60%); // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(top, @startColor, @endColor) repeat-x mix(@startColor, @endColor, 60%); // Opera 11.10
background: linear-gradient(to bottom, @startColor, @endColor) repeat-x mix(@startColor, @endColor, 60%); // Standard, IE10
}

.content {
.gradient-vertical; //notice how I am just calling it without brackets and it will still inherit the default values
}
.blueBox {
.gradient-vertical(#40a3db, #0c78b7, #228ac6);
}
[/CSS]

Here’s the output:
[CSS]
.content {
background: #444444;
background: -moz-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333)) repeat-x #474747;
background: -webkit-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: -o-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: linear-gradient(to bottom, #555555, #333333) repeat-x #474747;
}

.blueBox {
background: #228ac6;
background: -moz-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#40a3db), to(#0c78b7)) repeat-x #2b91cc;
background: -webkit-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: -o-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: linear-gradient(to bottom, #40a3db, #0c78b7) repeat-x #2b91cc;
}
[/CSS]

Inheritance

In LESS, inheritance is declared by just calling out the already declared selector:

[CSS]
.content {
background: #ccc;
color: #333;
}
.container {
.content;
width: 1000px;
}
[/CSS]

Here’s the output:
[CSS]
.content {
background: #ccc;
color: #333;
}
.container {
background: #ccc;
color: #333;
width: 1000px;
}
[/CSS]

Anything else?

There are many more features that encompass LESS. You can learn more by visiting http://lesscss.org or you can view its usage and function reference as well.

The process of pre-compiling your CSS

As well all know, browsers only understand stylesheets with the extension “.css”… plain and simple. However, with the new way of writing lines of css, we will have to use pre-compilers to compile our Sass/LESS code into a .css extension stylesheet that browsers understand. This just means that we will be writing our css code in a different way than normal and compile it so that it spits out a file (with the extension of “.css”) that browsers can understand.

What pre-compiler options do I have?

There are a few pre-compilers that I use which can help you compile your Sass or LESS files into readable .css files.

CodeKit
The main one I use is called Codekit. While it is only a Mac application at the moment, it is worth every penny, especially if you work on both Sass and LESS files(like me) and are using a Mac. It can also compress your files and has features for other languages as well.

Prepros
Prepros is another great software that can compile both Sass and LESS files and is FREE! Who doesn’t like free? Plus, it’s almost the equivalent to Codekit except this is currently only for Windows users. So, Windows users rejoice!

Compass app
Compass.app is another tool you can use to compile your Sass with Compass files.It’s only $10 and also for PC/Mac/Linux.

SimpLESS
SimpLess, as you may have guessed by now, is a pre-compiler for Less files and has a few great options for compiling your LESS files. It is also available for PC and Mac.

So, Which extensible CSS preprocessor language should I use?

While Sass has slightly more robust features (such as control directives), LESS is becoming more and more robust in its own right and is being used more and more. It really depends upon your own personal preference. I still use LESS for certain projects which involve using the Twitter Bootstrap Framework for some of my websites, but I also am currently using Sass as my primary extensible CSS preprocessor language because of its other features and because it also can be used with the Compass Framework and can be used with the Foundation Framework.

Conclusion

Hopefully I’ve provided you some helpful insight into using these new CSS preprocessor languages that you can use on your next big project. By using these new CSS languages, you can save a ton of time when developing and styling your websites.

Let me know in the comments below which language you like best and why. Also, don’t forget to share this with others to let them know about these two awesome extensible CSS languages. Thanks!

5 thoughts on “Using Extensible CSS Preprocessor Languages: Sass or LESS

  1. I’ve been using Sass for about a month now and I can’t go back to writing normal CSS again. It’s so much faster and easier!

  2. I wish CSS was like this from the start. Makes perfect sense, especially with nesting.

    Great resources btw. I actually really love using Codekit for my projects.

  3. Helpful info. Lucky me I discovered your web site unintentionally, and I am surprised why this accident didn’t took
    place earlier! I bookmarked it.

Leave a Reply

Your email address will not be published. Required fields are marked *