Sass vs. LESS vs.

Siylus

}ulie Rose
Ociobei io, :oi

!"#$" &'' ()*+),$*--,) #- .*-/0

Tleie aie many issues io iale inio accouni wlen consideiing wlicl CSS
piepiocessoi io use. Fiisi I will give an oveiview of ile iliee mosi populai
piepiocessois and ileii advaniages. Tlen I will compaie ilem on feaiuies ilai
iley all offei io allow you io male an infoimed decision.

I will be compaiing ilem based on:
Insiallaiion
Exiensions
Language
Vaiiables
Mixins

12*)2#*3
'4--

A CSS piepiocessoi designed by Hampion Caiilin and developed by Nailan
Weizenbaum in :ooy. Tlis piepiocessoi is coded in Ruby and is one of ile mosi
populai piepiocessois available. Sass allows foi an easy insiallaiion and las many
feaiuies ilai siandaid CSS does noi offei.

!"#$%&$'()
Sass las a syniax ilai is exiiemely close io CSS so ii does noi iale long io
leain if ileie is some baclgiound lnowledge of CSS. Ii also las iliee
specific feaiuies ilai aie noi available in LESS oi Siylus. Tle gexiend
feaiuie allows ile designei use selecioi inleiiiance and say ilai one
selecioi slould inleiii ile siyles of anoilei wiiloui iepeaiing youiself. Sass
also allows ile use of gmedia nesied in CSS iules so designeis can declaie
media queiies inside seleciois. Lasily, you can use gconieni diieciives
wiilin mixins io male ii easiei io define absiiaciions ielaiing io ile
consiiuciion of seleciois and diieciives.

56''

Lile Sass, ilis is one of ile mosi populai CSS piepiocessois available, bui ilis one
is wiiiien in }avaSciipi. Ii was designed by Alexis Selliei and developed by lim
along wiil Dmiiiy Fadeyev in :ooq. Ii is designed io be as close io CSS as possible,
wlicl males ii one of ile simplesi piepiocessois io leain.

!"#$%&$'()
One of ile main advaniages of LESS is ilai ii can iun on boil seivei-side
and clieni-side. Many of ile oilei CSS piepiocessois do noi offei clieni side
piocessing so ilis is a plus. Also, in LESS eveiy class is a mixin so ileie is no
need foi exiia symbols io denoie ilai ii is a class. Eveiyiling in LESS was
designed io simplify ile code maling ii easy foi web designeis io lave all
ile feaiuies ii offeis wiiloui laving io woiiy aboui biowsei compilaiion
pioblems.

'/789-

As ile iliid mosi used CSS piepiocessoi, Siylus was designed and influenced by
Sass and LESS. Ii was developed by LeainBoosi in :oio and iis fiisi siable ielease
came oui Novembei :(, :oi:. Ii is wiiiien in }avaSciipi and ile code is meani io be
veiy minimal and flexible. Tle only iequiiemeni io insiall ilis piepiocessoi is io
alieady lave Node}S insialled.

!"#$%&$'()
One of ile advaniages of Siylus is ilai ii is wliiespace based so you can
omii colons and semicolons. Tle feel of siylus iends io be moie lile a
piogiamming language iailei ilan lile CSS so foi some people ilis could
be an advaniage, bui foi oileis ii could be a disadvaniage. Siylus also
suppoiis ile gleyfiames diieciive, wlicl allows designeis io cieaie
animaiions.

&,:+4)#-,;

<;-/4884/#,;

'4--
On Mac:
$ sudo gem install sass
$ sass --watch style.scss:style.css
On Windows:
$ gem install sass
$ sass --watch style.scss:style.css

56''
Download ile less.js file fiom ile websiie
Add ile following io <lead> in cieaied file:


<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>


Easiesi way io insiall ile seivei-side veision is iliougl Node Paclage
Managei (NPM)

'/789-
Musi insiall Node}S befoie Siylus can be insialled
Once Node}S is insialled, use NPM io insiall Siylus
$ npm install stylus
$ stylus css watch

6=/*;-#,;-

All iliee piepiocessois offei ile use of exiensions, bui eacl one las iis own
specific exiensions wiil diffeieni feaiuies.

'4--

One of ile piomineni feaiuies of Sass is ilai ii offeis Compass, wlicl is a
fiamewoil on iop of Sass. Tlis is a liglei-level libiaiy of mixins and funciions
ilai give ile designei even moie funciionaliiy. Ii includes common CSS lelpeis
lile iesei, layoui elemenis, iypogiaply, and image spiiies. Compass is basically an
all-in-one paclage wiil many exiia feaiuies buili-in io male ii even easiei foi web
designeis io cieaie websiies. Tlis is one of ile main ieasons wly many people
cloose Sass as ileii CSS piepiocessoi.

56''

Unlile Sass, LESS does noi lave an all-in-one exiension lile Compass. Wlai LESS
does offei aie many exiensions ilai lave ile same funciions as Compass, jusi noi
all in one place. Tle exiensions ilai can be insialled include:

CSS Mixins
! LESS Elemenis
! Piebooi
! LESS Mixins
Giid exiensions
! Fiameless
! Semaniic.gs
Layoui
! Even.less

'/789-

Tle mosi populai exiension foi Siylus is called Nib. Tlis is an all-in-one exiension
lile Compass and ii includes CSS lelpeis foi giadienis, boidei-iadius, eic. and
includes mixins foi common CSS paiieins. Nib allows designeis io focus moie on
ile feaiuies ilai iley wani io include in ileii webpage insiead of laving io find
sepaiaie exiensions io do eacl funciion.

54;>94>*

Tle language ilai ile CSS piepiocessoi is wiiiien in is one of ile main
consideiaiions web designeis use wlen cloosing ile iigli piepiocessoi io use.
Many people aie comfoiiable wiil diffeieni languages so iley usually cloose ile
piepiocessoi ilai is wiiiien in a language iley aie comfoiiable wiil. Tle
languages ilai ilese iop iliee piepiocessois aie wiiiien in aie:












?4)#4.8*-

Tle use of vaiiables is an impoiiani feaiuie ilai all iliee piepiocessoi include, bui
ile ways ile vaiiables aie defined and used vaiy beiween ile diffeieni cloices.
Ruby
}avaSciipi
}avaSciipi

'4--
Uses "s" symbol io denoie vaiiables


$main-background: #0982c1;
$borderStyle: dotted;

body {
color: $main-background;
border: 1px $borderStyle $main-background;
}



56''
Uses "g" symbol io denoie vaiiables


@main-background: #0982c1;
@borderStyle: dotted;

body {
color: @main-background;
border: 1px @borderStyle @main-background;
}



'/789-
Doesn'i iequiie anyiling befoie ile name of ile vaiiable bui "s" symbol is
accepied and semicolons aie noi iequiied.


main-background = #0982c1
$borderStyle = dotted

body
color main-background
border 1px $borderStyle main-background



@#=#;-

Tle use of mixins is also included in all iliee piepiocessois, bui iley aie noi
specifically defined in eacl.

'4--
Declaies gmixin befoie ile siyle and also las ile abiliiy io use selecioi
inleiiiance.


@mixin border-radius ($radius: 5px) {
border-radius: $radius;
}
nav {
margin: 50px auto 0;
width: 500px;
height: 45px;
@include border-radius(10px);
}



56''
Tleie is no specific leywoid io denoie a mixin because eveiy class is a mixin.


.border(@radius) {
border-radius: @radius;
}
nav {
margin: 50px auto 0;
width: 500px;
height: 45px;
.border(10px);
}



'/789-
Similai io LESS as in you don'i lave io declaie a mixin, bui ii also suppoiis
inleiiiance lile Sass.


border(radius) {
border-radius: radius
}
nav {
margin: 50px auto 0
width: 500px
height: 45px
border(10px)
}



&,;$89-#,;

In conclusion, ileie aie many feaiuies ilai all iliee CSS piepiocessois offei, bui ii
is up io you, wlicl way you ilinl is besi. Cloosing a piepiocessoi ieally comes
down io peisonal piefeience and wlai language you piefei, bui Sass and Siylus aie
moie poweiful ilan LESS because iley lave ile exiia feaiuie of Compass and Nib.
Tleie ieally aie no disadvaniages io using CSS piepiocessois because iley allow
you io add many moie feaiuies io youi CSS. Tle only downside is ilai you lave io
leain and new syniax and gei used io low io use ilem. Sass is ile besi cloice if
you piefei Ruby and aie ielaiively new io CSS piepiocessing because ii is veiy
simple io leain. LESS is a beiiei cloice if you piefei }avaSciipi and lile Sass ii is
easy io leain because ile syniax is similai io CSS so many fiisi iime useis cloose
LESS. Lasily, Siylus is a moie complex piepiocessoi ilai focuses moie on
meiapiogiamming and manipulaiing code so ii is besi io cloose if you aie moie
expeiienced in piepiocessing. Oveiall, piepiocessois aie a gieai way io add
feaiuies ilai aien'i available in plain CSS wiiloui biealing biowsei capabiliiy and
I believe iley aie going io become moie populai in ile fuiuie.

!,)A- &#/*B


liip:]]feedbacl.liveieload.com]lnowledgebase]aiiicles]S6::y-cloosing-a-
css-piepiocessoi
liip:]]www.slideslaie.nei]paiiiclai]css-piepiocessois-sass-less-and-siylus
liip:]]www.scoiilogic.com]blog]:oi]o]oS]less-vs-sass-vs-siylus.liml
liip:]]www.longliai.com]blog]sass-vs-less]
liip:]]coding.smaslingmagazine.com]:oii]oq]oq]an-iniioduciion-io-less-
and-compaiison-io-sass]
liip:]]nei.iuisplus.com]iuioiials]liml-css-ieclniques]sass-vs-less-vs-
siylus-a-piepiocessoi-slooioui]