Sass vs. Less | CSS-Tricks

"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has ... DigitalOceanjoiningforceswithCSS-Tricks!Specialwelcomeoffer:get$100offreecredit. “WhichCSSpreprocessorlanguageshouldIchoose?”isahottopiclately.I’vebeenaskedinpersonseveraltimesandanonlinedebatehasbeenpoppingupeveryfewdaysitseems.It’snicethattheconversationhaslargelyturnedfromwhetherornotpreprocessingisagoodideatowhichonelanguageisbest.Let’sdothisthing. Reallyshortanswer:Sass Slightlylongeranswer:Sassisbetteronawholebunchofdifferentfronts,butifyouarealreadyhappyinLess,that’scool,atleastyouaredoingyourselfafavorbypreprocessing. Muchlongeranswer:Readon. TheMuchLongerAnswer TheLearningCurvewithRubyandCommandLineandWhatever Theonlylearningcurveisthesyntax.YoushoulduseanapplikeCodeKit,LiveReload,orMixturetowatchandcompileyourauthoredfiles.YouneedtoknowjacksquataboutRubyorthecommandlineorwhateverelse.Maybeyoushould,butyoudon’thaveto,soit’snotafactorhere.ThefactthatSassisinRubyandLessisinJavaScriptisoflittleconsequencetomostpotentialusers. Winner:Nobody HelpingwithCSS3 Witheitherlanguage,youcanwriteyourownmixinstohelpwithvendorprefixes.Nowinnerthere.Butyouknowhowyoudon’tgobackandupdatetheprefixesyouuseonallyourprojects?(Youdon’t.)Youalsowon’tupdateyourhandcraftedmixinsfile.(Probably.) InSass,youcanuseCompass,andCompasswillkeepitselfupdated,andthustheprefixsituationishandledforyou.Bourbonisalsogood.Therewillbesomebackandforthonwhichoftheseprojectis“ahead.” InLess,therearealsosomemixinlibrariesbattlingtobethebest.Theyarelookingalotbetterthesedaysthantheyhaveinthepast.Despitetheirmarketing-ysupportcharts,Idon’tthinktheyarequiteasrobustastheSassversions.I’vebeenledtounderstandinthepastthatthelanguageofLessitselfdoesn’tmakeitpossibletobuildasrobustoflibrariesontopofit.We’llgettosomeofthatnext. Inbothcases,theonusisonyoutokeepthepreprocessorsoftwareitselfuptodateaswellastheselibraries.IalsofindthateasierinSassingeneral.Forinstance,CompassupdateswilljustcomeautomaticallyinCodeKit,oryouuseaGemwhichiseasytoupdate,whileLessmixinsyou’llhavetomanuallyupdateafileyourself. Winner:NarrowlySass LanguageAbility:Logic/Loops Lesshastheabilitytodo“guardedmixins.”Thesearemixinsthatonlytakeeffectwhenacertainconditionistrue.Perhapsyouwanttosetabackgroundcolorbasedonthecurrenttextcolorinamodule.Ifthetextcoloris“prettylight”you’llprobablywantadarkbackground.Ifit’s“prettydark”you’llwantalightbackground.Soyouhaveasinglemixinbrokeintotwopartswiththeseguardsthatensurethatonlyoneofthemtakeseffect. .set-bg-color(@text-color)when(lightness(@text-color)>=50%){ background:black; } .set-bg-color(@text-color)when(lightness(@text-color)<50%){ background:#ccc; } Sothenwhenyouuseit,you’llgetthecorrectbackground: .box-1{ color:#BADA55; .set-bg-color(#BADA55); } Thatisoverlysimplified,butyoulikelygettheidea.Youcandosomefancystuffwithit.Lesscanalsodoself-referencingrecursionwhereamixincancallitselfwithanupdatedvaluecreatingaloop. .loop(@index)when(@index>0){ .myclass{ z-index:@index; } //Callitself .loopingClass(@index-1); } //Stoploop .loopingClass(0){} //Outputsstuff .loopingClass(10); Butthat’swherethelogic/loopingabilitiesofLessend.Sasshasactuallogicalandloopingoperatorsinthelanguage.if/then/elsestatements,forloops,whileloops,andeachloops.Notricks,justproperprogramming.Whileguardedmixinsareaprettycool,naturalconcept,languagerobustnessgoestoSass.ThislanguagerobustnessiswhatmakesCompasspossible. Forexample,Compasshasamixincalledbackground.It’ssorobust,thatyoucanpassjustaboutwhateveryouwanttothatthingthatitwilloutputwhatyouneed.Images,gradients,andanycombinationofthemcomma-separated,andyou’llgetwhatyouneed(vendorprefixesandall). Thissuccinctandintelligiblecode: .bam{ @includebackground( image-url("foo.png"), linear-gradient(topleft,#333,#0c0), radial-gradient(#c00,#fff100px) ); } Turnsintothismonster(whichisunfortunatelywhatweneedforittoworkwithasgoodofbrowsersupportaswecanget): .bam{ background:url('/foo.png'),-webkit-gradient(linear,0%0%,100%100%,color-stop(0%,#333333),color-stop(100%,#00cc00)),-webkit-gradient(radial,50%50%,0,50%50%,100,color-stop(0%,#cc0000),color-stop(100%,#ffffff)); background:url('/foo.png'),-webkit-linear-gradient(topleft,#333333,#00cc00),-webkit-radial-gradient(#cc0000,#ffffff100px); background:url('/foo.png'),-moz-linear-gradient(topleft,#333333,#00cc00),-moz-radial-gradient(#cc0000,#ffffff100px); background:url('/foo.png'),-o-linear-gradient(topleft,#333333,#00cc00),-o-radial-gradient(#cc0000,#ffffff100px); background:url('/foo.png'),-ms-linear-gradient(topleft,#333333,#00cc00),-ms-radial-gradient(#cc0000,#ffffff100px); background:url('/foo.png'),linear-gradient(topleft,#333333,#00cc00),radial-gradient(#cc0000,#ffffff100px); } Winner:Sass WebsiteNiceitude Lesshasanicer,moreusablewebsite.TheSassdocumentationisn’tawful.It’scompleteandyoucanfindwhatyouneed.Butwhencompetingforattentionfromfrontendpeople,Lesshastheedge.Idon’tdoubtthisplaysalargeroleinLesscurrentlywinningthepopularityrace. IknowthattheSasswebsiteisundergoingamajoroverhaulandlotsofawesomepeopleareworkingonit.Itseemstomethatit’sgoingveryslowlythough. Winner:LESS The@extendConcept Sayyoudeclareaclassthathasabitofstyling.Thenyouwantanotherclasswhichyouwanttodojustaboutthesamething,onlyafewadditionalthings.InLessyou’dlikely: .module-b{ .module-a();/*Copieseverythingfrom.module-adownhere*/ border:1pxsolidred; } That’san“include”essentially.Amixin,inbothlanguages.YoucoulduseanincludetodothatSassaswell,butyou’[email protected]@extend,thestylesfrom.module-aaren’tjustduplicateddownin.mobule-b(whatcouldbeconsideredbloat),theselectorfor.module-aisalteredto.module-a,.module-binthecompiledCSS(whichismoreefficient). .module-a{ /*Abunchofstuff*/ } .module-b{ /*Someuniquestyling*/ @extend.module-a; } Compilesinto .module-a,.module-b{ /*Abunchofstuff*/ } .module-b{ /*Someuniquestyling*/ } Seethat?Itrewritesselectors,whichiswaymoreefficient. InLess,everysingleclassisalsoamixin,programmaticallymuddiesthewaters,butiseasiertounderstandatfirst. AsofLess1.4,italsosupportsextend.YoucanseesomeexampleswhenweupgradetoitonCodePen.It’sabitfunkyinthatitdoesn’textendselectorsnestedintheoriginalclassunlessyouuseanadditionalallkeyword.Havingtheoptiontogoeitherwayseemslikeit’sactuallymorepowerfultome,butalsowaryofwhat’sgoingonunderthecovers. Sassalsohasthepowertoextend“placeholder”classes.Essentiallyinvisibleclasses,intheformatof%placeholder{}.Thisisusefulforusinginternalnamingthatmakessensetherebutwouldn’tasactualclassnames. Winner:Sass VariableHandling Lessuses@,Sassuses$.ThedollarsignhasnoinherentmeaninginCSS,[email protected]’sforthingslikedeclaring@keyframesorblocksof@mediaqueries.Youcouldchalkthisoneuptopersonalpreferenceandnotabigdeal,butIthinktheedgehereisforSasswhichdoesn’tconfusestandingconcepts. Sasshassomeweirdnesswithscopeinvariablesthough.Ifyouoverwritea“global”variable“locally”,theglobalvariabletakesonthelocalvalue.Thisjustfeelskindofweird. $color:black; .scoped{ $color:white; color:$color; } .unscoped{ //LESS=black(global) //Sass=white(overwrittenbylocal) color:$color; } I’vehearditcanbeusefulbutit’snotintuitive,especiallyifyouwriteJavaScript. Winner:Tossup WorkingwithMediaQueries Thewaymostofusstartedworkingwith@mediaquerieswasaddingblocksofthematthebottomofyourmainstylesheet.Thatworks,butitleadstoamentaldisconnectbetweentheoriginalstylingandtheresponsivestyles.Like: .some-class{ /*Defaultstyling*/ } /*HundredsoflinesofCSS*/ @media(max-width:800px){ .some-class{ /*Responsivestyles*/ } } WithSassorLess,wecanbringthosestylestogetherthroughnesting. .some-class{ /*Defaultstyling*/ @media(max-width:800px){ /*Responsivestyles*/ } } YoucangetevensexierwithSass.Thereisareallycool“respond-to”technique(seecodebyChrisEppstein,BenSchwarz,andJeffCroft)fornaming/usingbreakpoints. =respond-to($name) @if$name==small-screen @mediaonlyscreenand(min-width:320px) @content @if$name==large-screen @mediaonlyscreenand(min-width:800px) @content Theyoucanusethemsuccinctlyandsemantically: .column width:25% +respond-to(small-screen) width:100% Nestedmediaqueriesareafantasticwaytowork.RumorhasitSass3.3willhavemorefeaturestomakethisevenmoreuseful,includingawaytomakeextendworkwithinmediaquerieswhichiscurrentlyimpossibleinbothLessandSass. Winner:Sass Math Forthemostpart,themathissimilar,buttherearesomeweirdnesseswithhowunitsarehandled.Forinstance,Lesswillassumethefirstunityouuseiswhatyouwantout,ignoringfurtherunits. div{ width:100px+2em;//==102px(weird) } InSass,yougetaclearerror:Incompatibleunits:’em’and‘px’.Iguessit’sdebatableifit’sbettertoerrororbewrong,butI’dpersonallyratherhavetheerror.Especiallyifyou’redealingwithvariablesratherthanstraightunitsandit’shardertotrackdown. Sasswillalsoletyouperformmathon“unknown”units,makingitabitmorefutureproofshouldsomenewunitcomealongbeforetheyareabletoupdate.Lessdoesnot.TherearesomemoreweirddifferenceslikehowSasshandlesmultiplyingvaluesthatbothhaveunits,butit’sesotericenoughtonotbeworthmentioning. Winner:NarrowlySass ActiveDevelopment I’mgoingtoupdatethesenumberssinceit’sbeenenoughtimesincetheoriginalwritingofthisarticle. 05/16/12 01/12/13 06/25/13 NumberofopenissuesonLESS 392 112 142 NumberofopenissuesonSass 84 83 110 PendingpullrequestsonLESS 86 10 5 PendingpullrequestsonSass 3 7 11 NumberofcommitsinthelastmonthinLESS 11 84 2 NumberofcommitsinthelastmonthinSass 35 14 14 Noneofthatstuffisanydefinitiveproofthatoneprojectismoreactivethantheother,butitisinterestingtolookatstats.AsIunderstandit,bothoftheleadsworkonthelanguagesinwhateverlittlefreetimetheyhave,astheybothhaveothermajornewprojectstheyareworkingon. Lesshasbeenprettyactivelylately,butnowSasshasgottenmuchmoreactivetoo,duetoacoremembergettingtofocusonitdirectly. Winner:Tossup MoreReading ChrisEppstein:Sass/LESSComparison JeremyHixon:AnIntroductionToLESS,AndComparisonToSass KenCollins:TooLESS?ShouldYouBeUsingSass? JohnathanCroom:Sassvs.LESSvs.Stylus:PreprocessorShootout DigitalOceanjoiningforceswithCSS-Tricks!Specialwelcomeoffer:get$100offreecredit. Comments GregPermalinktocomment#May16,2012 Greatcomparisonforsomeonelikemewhoisn’tusingeitheryet.GoodtoknowwhichtodiveintoshouldIeventuallygothepreprocessorroute. VadimBrodskyPermalinktocomment#May16,2012 AwesomeworkChris.IhavestartedwithLESSandSASSfeelsmorepowerfultome. AnythoughtsonStylus? ChrisCoyierPermalinktocomment#May16,2012 IhaveusedStylusjustaverylittlebit.I’vepurposelyleftitoffthearticleforbrevityandthefactthatIdon’tthinkitdoesanythingbetterthanitsbiggerbrothersatthemoment.CorrectmeifI’mwrong. RomanKomarovPermalinktocomment#May17,2012 SpeakingofStylus—it’snotthesameasits“older”brothers.Actually,itissuperiorinmanyfields: 1.Ithavethosetransparentmixins,soyoucanjustusethemas`box-sizing:border-box`andgetalltheprefixesthereforyou. 2.Ithavethesamelogic/loopsabilitiesasSASS,butprovidesalotofshortcutssoyoucanwrite`width:100pxiffoo`etc. 3.StylusissomuchmoreflexiblethanSASSinnestedruleswithparentreferencing.InStylusyoucando`&__element`,`.foo:not(&)`,`ul&`etc.InSASSthosethingsareimpossible,asitdon’tevensupportthe`&`ininterpolations. 4.Stylushavepropertylookup,whichcanbeveryuseful. 5.Stylushavealotofotherfeatures,alotofwhicharenotavailabletoSASSorLess. Speakingofthedownsides,themostambiguousissueinStylusisit’ssyntax.Whileitcanbeveryflexible,itcanberestrictivetooinsomecasessinceithavetheindent-basedsyntax. However,theflexibilityofthelanguageoverweightsit’ssyntaxproblems,soIchoseStylus. NicolasGallagherPermalinktocomment#May18,2012 I’veyettobeconvincedbyStylus. MyrelativelyrecentexperiencewithStyluswasthatit’scompilerisabitflakey.Sometimesitwouldsilentlyfail,othertimesitwouldoutputmangledCSS(e.g.declarationsasselectors)ratherthanerror. Personally,I’mnotafanoftransparentmixinsbecauseIprefertoknowwhichpartsofthefilearenativeCSSandwhichpartsarebeinghandledbythepre-processor’sadditionalfunctionality. RomanKomarovPermalinktocomment#May18,2012 Yep,thecompilerisabitficklerightnow,buthey!StylusisnotthatpopularasSassandLessnow,sotherearenotthatmuchdevelopersandbug-reportersthere.Ihopethatit’sdevelopmentwouldbringthecompilertothemorestablestate. Speakingofmixins:whileyoucanusetransparentones,youcancallthemasfunctionstoo,soit’sanoptionalthing. MattReedPermalinktocomment#May16,2012 Ilikehowyoupointouttheadvantagesofthe@extendinSASS,althoughIpreferthesuccinctnessofLESSinthatcase.IalsoreallylikethewaySASSisstartingtohandlemediaqueriesandIhopethatLESSwillsoonincorporatesomethingsimilar. MattReedPermalinktocomment#May16,2012 Also,oneofthereasonsI’vekeptawayfromSASSisthatIhavenoideawhatcompassisandwhyit’sconnectedtoSASS HenryChargePermalinktocomment#May17,2012 Onceyou’veusedCompassyouwon’tbelievehowpowerfulitisandwhyyouweren’tusingitsooner!Istronglysuggestyougiveitatry… RizkySyazuliPermalinktocomment#May17,2012 CompassisbasicallyacollectionofCSS3mixinsandhelpers.youshouldcheckouttheirwebsiteifyou’dliketoknowmore.trustme,thefactthatSASShasCompassisawinbyitself. JasonFeatheringhamPermalinktocomment#May18,2012 Forthosewhodonotwanttosearchthroughthearticleagainforthelink:http://compass-style.org. AmyHendrixPermalinktocomment#May16,2012 Ihavetoadmit,IpickedSASSatfirstbecauseIwantedCompass(whichisaverygoodreason!),andIhaven’treallylookedatLESSsincebecauseIalreadyhadSASSsetup.It’sgreattoseeagood,well-reasonedcomparison. JohnathanCroomPermalinktocomment#May16,2012 IreallyenjoyhowsimpletoCSSthesyntaxisinStyluscomparedtoSass.Alotoftheextrathingslike@mixinand@includeareleftout. @mixincolors($fontColor,$backgroundColor){ background:$backgroundColor; color:$font; } body{ @includecolors(#0982c1,#FFF); } comparedto colors($fontColor,$backgroundColor){ background:$backgroundColor; color:$fontColor; } body{ colors(#0982c1,#FFF); } Stylusalsohasapowerfulmixinadd-onsimilartoCompasscallednib. Ultimatelyitisjustpersonalpreference,butIhavegrowntolikeStylusquitealot. ShaneRileyPermalinktocomment#May17,2012 Ifyoudon’tliketheSCSSsyntaxofdeclaringandinvokingmixins,youcanalwaysusetheSASSsyntax. =colors($fontColor,$backgroundColor) background:$backgroundColor color:$font body +colors(#0982c1,#FFF) IanStormTaylorPermalinktocomment#May17,2012 You’reStyluscanalsogetevensimpler: colors(color,bgcolor)   background:bgcolor   color:color body   colors:#0982c1,#FFF JamesFlorentinoPermalinktocomment#May18,2012 Ormuchsimpler(withoutsemi-colons!) colors(color,bgcolor) backgroundbgcolor colorcolor body colors#0982c1,#FFF JamesFlorentinoPermalinktocomment#May18,2012 *withoutcolonsrather. AnasNakawaPermalinktocomment#May16,2012 AlsodebugginginSASSinmucheasierthanthewayitisinLESS ChrisCoyierPermalinktocomment#May17,2012 Howisthat?Justcurious.Doyouprefertheerrormessagingorsomethinglikethat? CharlesRoperPermalinktocomment#May17,2012 MayAnasisreferringtoFireSass?https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/ MichaelTurnwallPermalinktocomment#May17,2012 Compasswillwritethefileandlinenumberintothecompiledcssfilesoyoucanseewherethestylewasoriginallywritten.It’swhatFireSassdoeswithouthavingtorunanotherbrowserplugin. JacobPermalinktocomment#May16,2012 Nicewriteup.I’mstilltryingtodecidewhichroutetogo. Onetheonehand,ifIwanttolearnanythingfromyouaboutcsspre-processing,IshouldlearnSASS. Ontheotherhand,Ireallywanttouse320andupinanewproject,buthaven’tfoundagoodSASSport,yet.Anybodyhereknowofone? Codekitisawesome,bytheway.Thanksforthattip. Goodluckonyournextadventure! -Jacob ShanePermalinktocomment#May17,2012 JinaBoltonhasaSASSportofthenew320andUp.https://github.com/jina/Sass320andup JacobPermalinktocomment#May17,2012 JinahasaddedSASS/Compasssupportto320andup,ifanyoneisinterested.https://github.com/jina/Sass320andup JustwaitingforMalarkeytopullinthepullrequest. -J dustinhortonPermalinktocomment#May16,2012 ithinkeachhaveanotherimportantwin. sprites–sass(viacompass) terseness–less(don’tneedtodefineinclude,extend,etc) BrianPermalinktocomment#May18,2012 Iagree.Less’ssyntaxisslightlymoreintuitivewhenitcomestothat. Butthere’snoreasonyoushouldn’tlearnboth.Ipersonallyusesass/compass.ButtherearealotofprojectsouttherethatuseLESSexclusively,likeTwitterBootstrap. SopersonallyIthinkthebestoptionistolearnboth.Therearemanyotherpre-processorsoutthere,asmentionedStylusisone.IhavealwaystakenthestancetoatleastTRYallthetoolsatmydisplosal.Notonlyisitinvaluableinhelpingtofurthermyunderstandingofdifferentsyntaxes,butitmakesworkingonothersprojectseasierwhenIalreadyknowthesyntaxbecauseItooktheinitiativetolearnit.Thisappliestoallmydevelopmenttools,notjustcsspre-processors. RameshJhaPermalinktocomment#May16,2012 I’vebeenusingSASS(+Compass)forwhile(2months)–it’sGREAT! ScottRodPermalinktocomment#May16,2012 ItdoesseemlikeLESSiswinningthepopularitycontest…That’snotnecessarilygoodorbad.Forselfishreasons,IdidwishCompass/SASSweretreatedonparwithLESSratherthanperceivedassecondplace.LESSisagreatcontenderifyouhaven’tusedSASSbefore.But,inattemptofusingLESS,ithasmademeappreciateCompassmore.Iwouldn’tstartaprojectwithoutconfiguringCompassfirst. Ithinkarticulatetutorialsdemonstratinghowtouseaproduct–especiallywhenitcomestotheTerminal–willhelpsurpassthefirsthurdle. OneofmymostvaluedandhelpfulvideotutsrecordedbackinthedaypeakedmyinterestinpursuingCompassforthelonghaulopposedtootherpreprocessors.http://wp.me/P28635-1JE TheothergreatvideosI’veseenwereChrisEppstein’sandDavidKaneda’sdemosforSenchaTouch.(Sidetracking–IwishjQTouchreceivedmoredevotion.TheGUIisskinnedusingCompass/SASSandlookssupersexy.IMO) ToinstallCompass,copying/pasting2linesofcodefromherehttp://compass-style.org/install/intothespookyTerminalanyonecanhandle–especiallyafront-enddeveloper.AndifyouuseCoda,theTerminalisrightthere! Forthestill-terrified-at-the-terminalpeople,GUIsareavailableonthemarketforCompassandSass.Oneofthem…http://compass.handlino.com/ Giveitawhirl! JohnPermalinktocomment#May16,2012 I’mnotdoingwebdevelopmentatthemoment(Ihaveintherecentpast),butIkindofwonderwhynothaveyourpreprocessedCSSbe“CSS,plusashortshellscripttoexpandforbrowsersupport”. Thatis,thesinglebiggestspace-saverIseeinalltheseexamplesislinear-gradientbeingexpandedto[-o-linear-gradient,-webkit-linear-gradient,-moz-linear-gradient,etc].Butplain“linear-gradient”isperfectlyvalidCSS3,andit’sveryeasytowriteascriptwhichexpandsthatintothevariantsthatworkoneachindividuallegacybrowser. Withamodernbrowser,youcanwriteandtestwithoutevenrunningthepreprocessor.Andit’seasytoremovethesebackwards-compatibilityhooksfromyourscriptlaterasbrowsersarenolongerused. Sure,itwouldn’tsolvealloftheseproblems,butIthinkit’dbeanicewaytoget95%ofthewaythere,for10%ofthecomplexityofthesolution.Maybeit’sjustme,butI’dratherspendmytimelearningatechnologythat’sgoingtobearoundforthelonghaul(CSS)thantoolswhichhappentobeusefultoday(LESS,SASS)as,mostly,temporaryworkarounds. AdamJackettPermalinktocomment#May17,2012 IthinkmaybecheckoutsomemorebenefitstowhyyoushouldbeusingLESSorSASSovervanillaCSS.Forme,thenumberonebenefitisthatit’sjustwayfastertowrite.I’vebeenusingLESSforacoupleyears(mightbeswitchingtoSASSafterthisarticlethough)andonceyourealizehowmuchtimeyou’resaving,Ithinkyou’llunderstandwhyit’sgood. SASSandLESShavebeenaroundforafewyears,they’renotreallyworkarounds,butrathertoolstohelpwithproductivity.Theendresultisthesame,compiledCSS(orhandwritten),sowhynottaketheshortcut? AfterIstartedusingLESS(actuallyIwasusingCSScaffoldinPHPbeforethat)IrealizedhowpowerfulitwasandIactuallythinkitmakesmoresensetowriteitthatwaythanstraightupCSS.Mixins(orincludes),nestingandvariablesareverypowerfulbutsimpleconceptsthatIthinkCSSshouldhandlenatively(whichmightbecomerealitydowntheroad).Youcanreduceatonofcoderedundancywiththosealone. ScottPermalinktocomment#May17,2012 John,tryPrefix-free:http://leaverou.github.com/prefixfree/ ThevendorprefixthingistheonlycompellingreasonI’veeverseenforusingpre-processors,andPrefix-freesolvesthat. SeanPermalinktocomment#May17,2012 TheexampleI’veusedrecentlywasdefineagroupofcolouredspheresusingonlyCSS.Youcandothatwithacombinationofcornerradiusandanoffcentreradialgradients. Todefinethedifferentcoloursyoucanuseapre-processortowritethegradientsforyouusingalistofbasecolourswhichyoudarkenbyapresetamount. I’veneverusedLESStojudgeitbutIloveSASS. SunnyRatilalPermalinktocomment#May16,2012 GreatentryChris,asalways! I’vejuststartedtodelveintotheworldofCSSPreprocessingsoformeagreatinsightintoit;afterreadingthis,you’veconvicedmetogowithSASS. GrawlPermalinktocomment#May16,2012 SASSvs.LESS?Stylus. BenjaminKnightPermalinktocomment#May16,2012 Thishasbeensomethingoneveryone’smind,thanksforthewrite-upChris.Itwillbeinterestingtoseewhatgetsdiscussedatthepreprocessortalkthat’sbeinggivenatYelpattheendofthismonth. PersonallyI’vejustsortofendedupusingLESSbecausemyfirstexposuretopreprocessorswaswhenusingTwitter’sBootstrap. OnthetopicofhandlingCSS3prefixes,whynotjustuse-prefix-free.jsandstopworryingaboutit? PatPermalinktocomment#May17,2012 Forquickdemos-prefix-free.js(ortheLESSjsfile)isfine.ButyoushouldNEVERdependonjavascripttooutputyourprefixesinaproductionenvironment.NotonlywillitnotworkifJSisoffbutitalsoaddsun-neededprocessingtothefrontend. useCodeKit,LiveReloadorsimply“compasswatch”… BenjaminKnightPermalinktocomment#May18,2012 Thanksforyouadvice,Pat. DruidofLûhnPermalinktocomment#May16,2012 I’velookedintoandusedbothandpreferLESSforit’ssuccinctnessandeaseofuse:it’sbasicallyCSSmadecooler. ButnowthatI’veheardCOMPASSisreallygood,I’dliketotryoutSASSmore.ButIdon’tunderstandwhatitisreally. CouldyoumakeapostinwhatCOMPASSisandhowbesttouseit? JonathanWillingPermalinktocomment#May16,2012 I’verecentlybeenstartingaredesignonmywebsite,andalthoughI’mprettypooratwebdesigning,I’vegrowntolikeStylusthemost. Nosemicolons&bracesareawininmybook. ChrisCoyierPermalinktocomment#May17,2012 Soundslike,fromthecommentsabove,thatStylushassomeprettycompellingstuffinit.Howeveriftheonlythingyoulikeisthelackofsemicolonsandbracesyoucanalwaysusethe.sasssyntax JonFaustmanPermalinktocomment#May17,2012 Ihaven’tpersonallyusedStylus,sothisisnotmetryingtodissuadeyoufromusingthat,infactIthinkI’llgiveitashotafterthis. However,ifconcisenessisoneofyourbiggestconcerns,theorignalSasssyntaxalsoleavesoutsemicolonsandbraces.Ithasotherconcisebenefitslikeusing“+”insteadof“@include”.Icertainlyprefertheoriginalsyntax,butIfeellikeoneofthelastfew. BenjaminKnightPermalinktocomment#May18,2012 Personallyusingasyntaxthat’sanextensionofCSS’sownsyntaxfeelsalotmorecomfortabletome.ThatmeansnotallLESSorSASSisvalidCSS,butallCSSisvalidSASS/LESS.Seemsliketherearebetterwaystooptimizeyourworkflowthanjustnothavingtotypebracketsandsemicolons. JoePermalinktocomment#May17,2012 Withregardstothe‘HelpingwithCSS3’section,itmightbeworthmentioningallthemixinsmadeavailablebytheveryactiveBootstrapproject. Justincaseanyoneisn’taware,BootstrapisbuiltentirelyusingLESS. SoyoucouldarguethatLESSisperhapseasierforpeopletogetinto(youalludedtothisinthedocumentationpart),especiallywithitstiestoBootstrap–whichagainhelpspeoplejustgettingintowebdesign. AdamMcCombsPermalinktocomment#May17,2012 ForusLESSistheclearwinner.It’slightweightandveryeasytocustomize.WeusethesameLESSmixinsoneveryprojectsoitreallyspeedsupdevelopment.CSSwithoutLESSfeellikethedarkages. SimonPermalinktocomment#March20,2014 Youshouldreallytryoutsassthen–youwouldreallyseesomegreatbenefitsitreallyimprovesthewayyouworkandthesyntaxjustmakes“moresense”thanless–lessseemstohavefallenbehindonallthedifferentparameterstoughthiscommentis2yearsoldithinkitsworthchangingtosass!oriwouldpref.scss–causesassgivesalotsyntaxerrorsifyou’rnotreallystrictwhenyouwrite Jean-PhilippeEncaussePermalinktocomment#May17,2012 Commentsareveryinterresting,mostpeoplegotoSaSSbecauseofCompass. InourCMSwewenttoLESS –becauseofTwitterBootstrap –becauseJavaScriptcanbeusedeverywhere(likejsFiddle,iPad,DropBox,…fordebugging/codingpurpose)rubyisnotwellknowninbigcompany DanBoheaPermalinktocomment#May17,2012 There’sacoupleofSassportsofTwitterBootstrapnow. EdgarLeijsPermalinktocomment#May17,2012 Chris,ImustsayItotallyagreeonyourconclusions.IamusingbothforawhilenowandSASSfeelsmoresolidandmature. CiwanPermalinktocomment#May17,2012 HiGuys CansomeonepleaselinkmetoadetailedarticleaboutwhyCSSPre-prepossessingisagoodthingtodo.Doesn’titslowdownthepage? DavidPermalinktocomment#May17,2012 YoucancompileyourSass,ScssorLessintoastylesheetanduseitasnormal.Youdon’thavetocompileonpageload. IfyouareusingSass,youcanusetheWatchtoautomaticallycompileandcompressyourSassintoastandardcssfilewhichyouincludeasnormal:) PeteSissonPermalinktocomment#May17,2012 Typicallyit’ssomethingyoudobeforedeploying,soit’snotbeingcrunchedthroughoneverylivepageload. RizkySyazuliPermalinktocomment#May17,2012 theslowdownmighthappenifyou’reusingLESS.js(thejsversion),whichcompilesLESSonpageload.butSASSfilesisconvertedtoCSSduringdevelopment.andLESScanbeconfiguredtodothataswell. DavidPermalinktocomment#May17,2012 Greatarticle,butI’msurprisedyoudidn’ttouchonanyofthecompilingapplicationsastherearesomegoodonesforboth. AlsothedifferentSasssyntaxes.AsIunderstandistherearetwo,ScssandSass.AlthoughIguessyoucan’treallycomparethem,butIdothinkthatfromabeginnerspointofviewtheconfusionbetweenthetwosyntaxesinSasscanbeconfusing.IactuallypreferSasstoScssasyouhavenobraces!Hurrah. BenPermalinktocomment#May17,2012 Nicearticle.Iagreewitheverything,thoughI’venottriedanyofthosenewSASSmediafeaturesyet–thisisthefirstI’veheardofthem! OnethingthatalwaysputsmeoffLESSisthatwhileit’sveryeasyforadevelopertosimplythrowtheJSversionupandgetgoingrightaway,Iworrythatthewebwillfillupwithpagesdependentonscripttointerprettheirstyles,becauseit’swaytoeasyforalearningdevelopertojustleaveitatthat. Forwhateverreason,peoplewillfailtodistinguishbetweendevelopmentandproduction,andwithSASSifyouforgettorecompileitforproductionallyougetisabloatedfilefullofyourcommentsandwhitespace,butwithLESSyougetsomethingthatmightnotworkoneveryone’sbrowser. BryanPermalinktocomment#May17,2012 Bryanhere.TheguybehindCodeKit. Chris,yourarticlehascertainlyconvincedmetotakeacloserlookatSassinthefuture!TheonlypointIthinkyoumissedisSPEED. Sass(andCompass)arewritteninRuby,whichisagod-awfully-slowlanguage.Thisdoesn’treallymatterifyourstylesheetsarereasonablysized.But,ifyou’reworkingonverylargeprojects,compilingSasscantakemuchmoretimethancompilingLessorStylus.Soifyou’rethetypeofpersonwhomakesafewchangesandthenhits“save”toseetheminthebrowser,youcouldfindyourselffrequentlywaitingforSass/Compasstocatchup. Thereishope,however!SassisbeingportedtoCaswespeak.TheCimplementationisupto100x(note:that’s100TIMES,not100percent)faster. PeteBPermalinktocomment#May17,2012 CachinglargelynullifiesthecompliespeedforanythingIusepreprocessorsfor. I’mnotfamiliarwithSASScaching,butifitdoesitrightthenitshouldalwaysbeservingcachedfilesinaproductionenvironment. MichaelPermalinktocomment#May17,2012 AtRailsConftheothermonth,HamptonCatlin(dudebehindHaml/Sass)announced“libsass”,aversionofSasswritteninC++(https://github.com/hcatlin/libsass)sothatmightbeworthcheckingout.Itshouldbealotfaster. MichaelPermalinktocomment#May17,2012 Iamaf*ckingmoronwhodoesn’treadtotheendofcomments,apparently.Myapologies:/ NathanielHigginsPermalinktocomment#May20,2012 HaveyougotanymoreinformationaboutthisCport? MattHinchliffePermalinktocomment#May17,2012 Ifyou’reofsimilarmindsettomyselfLESScouldbeabetterbet.IwriteinaplainaCSSstylewiththeadditionofvariables,basicmathsandmixinsforprefixesonlyasifthespecsonthemodulesIemulatewerefinal.Iavoiduseofnestedrulesorsyntacticallyunfamiliarstuff.Inthissituationneitherhasanadvantage(Stylusdoesn’tinmyexperiencehandlethisstyletoowell,atleastasofwriting)otherthanthetoolstoprocessit.WhenconsideringthetoolsavailableIthinkLESShasanadvantageasthereareseveralcrossplatformapps,whichimportantlymeansdecentavailabilityonWindows. JakubChodorowiczPermalinktocomment#May17,2012 AnygoodWindowsSASSpreprocessorlikeCodeKit? TonyAdamsPermalinktocomment#May17,2012 Compass.apphasaWindowsversion.IusetheMacversioninsteadofCodeKit. http://compass.handlino.com/ CharlesRoperPermalinktocomment#May17,2012 LiveReload2,althoughstillindevelopment(“pre-alpha”)forWindows,lookspromising:http://livereload.com/ There’salsoScout:http://mhs.github.com/scout-app/ MichaelPermalinktocomment#May17,2012 SASSisgreatbecauseofCompass,LESSisgreatbecauseofTwitterBootstrap. CharlesRoperPermalinktocomment#May17,2012 SassisalsogreatbecauseofSusyandZurbFoundation: http://susy.oddbird.net/ https://github.com/zurb/foundation/tree/3.0-scss AnthonyArellanoPermalinktocomment#May17,2012 Ican’treallysaySASShadthisverybiggapwithLESS.SASSisamazingbecauseofsomeotherstuffslikeCompassextendsit.So,BasicallyLESScanonlyoutwitSASSwhenitcomestoeasytousecategory.OtherthanthatSASSisbetter. JohnPermalinktocomment#May17,2012 IusedLESSforawhilenow,butwouldliketocompareitwithSASS(andseewhatthatCompasshypeisabout).TheonlythingstoppingmeisRuby.SureIneedtoknowsquataboutitasyousay,butIstillneedtoinstallit!!AndonWindowsthisisneithereasynorwanted.WhywouldIneedtoinstallawholelanguagewithbellsandwhistlesjusttouseasmallpre-compiler?Givemeastandaloneprogramalready!ThefactthatthisnotexistsmakesmewonderaboutSASS’spopularityoutsidethedecliningRubycommunity. Amir-abbasPermalinktocomment#May18,2012 InstallingRubyismucheasierthanyouthink.onwindowsyoujustneedtodownloadandinstallrubyinstallerfromhttp://rubyinstaller.org/.thewholeprocessofinstallingruby,Sassandcompasstakesaround10minutesanditdoesn’tneedtoknowrubylanguage.bythewayrubyisnotthatfrightening;) LaurencePermalinktocomment#May17,2012 It’sworthnotingthatLESSdoesn’trequireRuby,whichseemslikeitcouldbeasignificantfactorforsome.IpersonallypreferbeingabletosetupaLESSprojectusinglessphpin5minutes,withouthavingtofaffaroundwithgemsetc(which,tobefair,I’veyettoproperlylearn.Buttimeismoneyandallthat). ScottKellumPermalinktocomment#May17,2012 HaveyoutriedStylus?ItisalmostaspowerfulasSassandbuiltonnodeJS. ScottKellumPermalinktocomment#May17,2012 Nicewriteup!AsaSassfanIamgladwecameoutontopalthoughitwasn’tasurprise. ButtogiveLESSsomecredit,mediabubblingwasactuallyintroducedshortlyafteritwasintroducedtoSass. LESSisdefinitelyunderpoweredcomparedtoSass,butStylusisaworthycompetitor.IthasalmostallthefeaturesSasshas,fromwhatIrecallitstartedasaJSbranchofSass,butincludessomereallyuniquesyntaxfeaturesallowingyoutoleaveoutpunctuationasyouplease. Sasswithcustomfunctionswinsbyalongshotonmathinmyopinion.Theabilitytocreatecustomfunctionsallowsyoutogreatlyincreasethemathematicalcapabilities.Customfunctionsareincrediblewhenbuildinggridlogicorjustmakingcustomcalculators. Onvariables,thelistfunctionsinSassallowliststoessentiallyactasanarrayofvariables.Multi-dimensionallistscanasobecreatedandusedbyusingspacesorcomas.Thisiskindofpushingthelimitsbutthisfunctionalitycanproveveryusefulinsomefunctions.Ihaveusedvariableswithlistsasmemorytostorecalculationsforuseincomplexfunctions. TheSassdeependgetsprettydeep.Tonsofawesomefeaturesandlanguageabilitiestotakeadvantageof. JasonHuckPermalinktocomment#May17,2012 Onemajorconsiderationmissingfromthiscomparisonistheeasewithwhicheithertoolcanbeintegratedwithcontinuousintegrationandautomatedbuildprocesses.UntilSassisportedtoC,LESSistheclearwinnerhere,since,outofthebox,itworkswithplainoldJavaScript,Node.js,andJava(viaRhino),andhadbeenportedtoPHPandafewotherlanguagesaswell.Sass’scurrentdependencyonRubyisaseriousAchillesheelformanydevelopers. RoryPermalinktocomment#May17,2012 Iagreethedependencyonrubyisoffputting.Iusefire.appbyHandlino(http://handlino.com/)tohandletherubystuffviaGUIbutitwouldbenicetobeabletoworkonSASSonmystagingserver(doesn’tsupportSASSviarubyasitsanoldPowerPCmac).TherewasanoldPHPportintheworksbutasfarasIknowithasn’tbeenkeptuptodate. RizkySyazuliPermalinktocomment#May17,2012 ihaven’tdiveintoCIorsuchsystemsyet.butaren’tCSSfilesfromLESS/SASSshouldalreadybecompiledduringdevelopment,waybeforeitentersanyautomatedtesting/build/deployprocess? doyouguyshavetowaitforalongbuildprocessjusttochangeafontcolor?seemslikeahassletome:| AndreaDeCarolisPermalinktocomment#May17,2012 NowI’mthinkingwhyIuse(andlove)LESSoverSASS. Here’swhat’scominovermyhead: Setup Settinguplesstakesabout15seconds.Justrenameyour.cssfilesinto.lessfiles.Lovelyforoldsites. Itworkseaslyinphporwhateveryouwant. Let’ssaythatasyoustartusingityoujustcan’tstop. Also,aprogramlikeCodekitcanoptimizeyourlifealot.Reallyalot. Syntax Nothingtolearnwithless.Tocreateafunctionjustneedtodeclareaclass.That’sprettycoolthough. There’splentyofmixinsalreadyavailableoutthere(oneforall:lesselements) Documentation HaveIalreadysaidthatyouneednoknowledgetostartusingLESS?well,incaseyouneed,thelessdocumentationisalreadythebestyoucanhave. AndrewLeachPermalinktocomment#May17,2012 Excellentarticle,thanksforsharing. ArtisPermalinktocomment#May17,2012 IsthereanywaytouseSASSsyntaxwithphppre-processor? FrancescoPermalinktocomment#May17,2012 IalwaysthoughtthatitwashardtoinstallSASSinaWindowsenvironment…I’mnotsurewhereIgotthatidea.IttookmelessthanfineminutestodownloadRuby,installitandgetSASSworking. Itdoeslookawesome,maybeit’stimetostartusingit,atlast. Thankyouforthegreatarticle! MitchPermalinktocomment#May17,2012 WhynomentionofmentionBootstrap?IsCompassthatmuchbetter? ChrisCoyierPermalinktocomment#May17,2012 Applesandoranges,I’mafraid. ScottKellumPermalinktocomment#May17,2012 Bootstrapisaframework,Compassisametaframework.ThisbasicallymeansCompassisaframeworkforbuildingframeworks.ForexampletherearenumerousCompassforksofTwitterBootstrap BootstrapisreallyjustanotherstyleframeworklikeZurbFoundationandBlueprint.These,likeChrissaid,areapplesandoranges. NikiPermalinktocomment#May17,2012 Excellentpost!IwouldalsolovetoseeoneofyourscreencastsonCompass. TjorriemorriePermalinktocomment#May17,2012 HiChris You’vedefinitelymissedamajorpoint.That’stheentrytoeitherone.ForSASSyouneedrubyandallkindsofinstallations,butwithLESSit’sajavascriptfileincludewhicheveryoneisaccustomedtofromusingplugins.Ihaven’tusedeither,butI’mgoingtobeginwithLESS(especiallysinceIdevelopeverydayonosxandwin).I’msureit’samajorconsiderationformanyothers. ChrisCoyierPermalinktocomment#May17,2012 Justfortherecord,I’veneverinstalledRubyorusedthecommandlinetoworkwithpreprocessing.Yes,SASSdependsonRuby,butthat’stotallytransparenttomeasIuseanapptodealwithit. Andanotherquickpoint,*please*don’tuseLESSviaactuallyincludingonyourpagevia