RSS

CSS Language: SASS vs {LESS} vs xCSS

30 Jan

 

My take is {LESS}. That’s the short answer.

Kind of longer (and boring) answer:

There is only slight difference between the two. The biggest challenge is syntax learning curve, everything else (IDE plugins, features, requirements, etc) is much or less the same.

One consideration is how heavy will we (or the consultants) use the framework? When used heavily, syntax and language can be complicated and hairy, hard to understand. New comers will have significant learning curve. However, either way with SASS or LESS, we will have the learning curve.

I want to say we should go with framework that we most comfortable to develop with. At the end of the day, we use this framework to deliver product, so the more we comfortable with the framework, the more we can beautify the site and deliver product. This also true for consultants we hire to do the UX piece. But, consultants leave us with their code which bring us to maintainability subject. And the question for that is: which one we are more comfortable to maintain?

But what makes me really pick LESS is not because I am more comfortable with them. Instead, it’s more because of the community support (and usage for that matter) for this particular framework. SASS used to have more active development but lately LESS has taken the spot despite being newer that SASS. Community’s acceptance and implementation of LESS is also increasing rapidly as shown in StackOverflow.com’s tags counts and BuiltWith usage statistic. Not only this means LESS is gaining momentum, but also support level that we can expect outside of official documentation.

Comparison

 

Sass

{less}

X-CSS

Age Oldest (v 3.2.5 as of this writing) Newer (v 1.3.3 as of this writing) Newest (v 1.0.1 as of this writing)
Active Development Open Issue 5/16/12: 84

Open Issue 1/12/13: 83

Pending pull request 5/16/12: 3

Pending pull request 1/12/13: 7

Commits count 5/16/12: 35

Commits count 1/12/13: 14

Open Issue 5/16/12: 392

Open Issue 1/12/13: 112

Pending pull request 5/16/12: 86

Pending pull request 1/12/13: 10

Commits count 5/16/12: 11

Commits count 1/12/13: 84

N/A
Requirements Ruby

Each rule in one line (SASS syntax)

Proper indentation (SASS syntax)

Compiler

Compiler PHP-enabled server
Documentation Online – Excellent

SO: 1431 tags

Online – Good

SO: 1260 tags

Online – Good

SO: 0 tag

Key Features Inheritance

Nested rules

Variables

Mixins (set of styles in a variable)

Function and operation

File ‘includes’

Inheritance

Nested selectors

Variables

Mixins

Math operations

File ‘includes’

Namespace

Interpolation (string & selector)

Scope

Inheritance

Nested selectors

Variables

Math operations

File ‘includes’

Language Type Compile Compile

Run-time compile (with JavaScript)

Run-time compile
Pro Support 2 syntax (SCSS – CSS-like syntax and SASS – Ruby-powered) Syntax matches CSS convention

Usage is common

 
Cons SASS syntax is learning curve (contrast to CSS convention)   Tedious and quirky setup

Variables definitions decrease readability

       

Some sources and links

Comprehensive comparison: http://css-tricks.com/sass-vs-less/
BuiltWith {less} Counts: http://trends.builtwith.com/websitelist/LESS
BuiltWith {less} Trends: http://trends.builtwith.com/javascript/LESS

Advertisements
 
Leave a comment

Posted by on January 30, 2013 in General

 

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: