10

What CSS preprocessor should I learn?

over 6 years ago from , Utopia

I am a front-end web developer who has been curious about precompilers for a while. My CSS files have been growing quite large lately and I was wondering what people use. It seems to be there are loads of articles on SASS, LESS, and SCSS, but I want to hear what the community here uses.

36 comments

  • Benjamin FritzBenjamin Fritz, 6 years ago

    SASS

    8 points
  • Mikey ClarkeMikey Clarke, 6 years ago (edited 6 years ago )

    Last time someone asked this Sass won by some margin.

    https://news.layervault.com/stories/8441-ask-dn-less-or-sass-you-just-have-to-vote-no-need-for-another-explanation-

    4 points
  • Phil LaPierPhil LaPier, 6 years ago

    Sass + Bourbon.

    3 points
  • Andy LeverenzAndy Leverenz, 6 years ago

    Once you go Sass you never go back!

    3 points
  • Alaik FAlaik F, 6 years ago

    LESS first, then switch to SASS later (or stick with LESS)

    3 points
  • Elliott ReganElliott Regan, 6 years ago

    New kid on the block, Myth:

    http://www.myth.io/

    Its a polyfill for future versions of CSS. Lets you use real CSS3 features that aren't supported even by Firefox or Chrome (or Safari).

    2 points
  • Aaron StanushAaron Stanush, 6 years ago

    +1 for Sass

    2 points
  • Ian RoseIan Rose, 6 years ago

    Personally, I've been using Sass. I'd argue that once you've learned one preprocessor using a different one just takes a couple minutes of looking over the documentation. LESS is considered one of the easier ones to setup though, which may be a deciding factor for you. I suggest trying them all out using something like http://codepen.io/

    Another thing to keep in mind is that if you are a Bootstrap user that you can use either LESS and now officially, Sass. Foundation is still Sass only.

    2 points
  • Alexander ZizzoAlexander Zizzo, 6 years ago

    SASS + Compass with a guard or grunt watch file. If you do a lot of PSD-> HTML, look at CSSHAT and PNGHat photoshop plugins as well.

    2 points
    • Adham DannawayAdham Dannaway, 6 years ago

      Agreed, SASS plus Compass is a great way to go. After using both SASS and LESS I've found that SASS is more powerful and it seems like it's also becoming the more popular option with front end devs. Compass makes SASS even more powerful with its library of mixins.

      0 points
  • Alec Molloy, 6 years ago

    I should mention I use Brackets, which has a LESS compiler extension available. Unless there are really compelling reasons to choose other languages, I think LESS would win.

    2 points
    • Bryce DriesengaBryce Driesenga, 6 years ago

      I use Brackets in concert with Prepros (for preprocessing, live browser refresh, and other nifty things.)

      I use SASS and then Bourbon and Neat which are helpful.

      1 point
  • Alec Molloy, 6 years ago

    Okay, so I think SASS wins out here. Thanks everyone who responded!

    1 point
  • Tomasz WyderkaTomasz Wyderka, 5 years ago

    If you feel more like a designer than developer, want to do the job easier without learning programming stuff you should try CSSOnDiet

    0 points
  • Sean O'GradySean O'Grady, 6 years ago

    LibSASS & Gulp. Compiler wait times are in the milliseconds.

    0 points
  • Matt ThomasMatt Thomas, 6 years ago

    Not to beat a dead horse here, but I was originally developing with LESS, switched over to SASS about a year ago and have never looked back. And there really is a lot of momentum in the community currently.

    I think will soon overtake (if it hasn't already) LESS and the rest in both popularity and power.

    0 points
  • Diego LafuenteDiego Lafuente, 6 years ago

    Definetively, SASS.

    Once you nail SASS, you can nail LESS and others without much effort. Learning preprocessing shouldn't take that long if you're used to CSS, wich, if it is not the case, you should first invest effort in CSS than SASS.

    0 points
  • Jan ZhengJan Zheng, 6 years ago

    SASS with the Bourbon library, which is lighter and smaller than Compass library. Compass if I have to.

    To get easier started with SASS, on a Mac or PC, take a look at Scout App: http://mhs.github.io/scout-app/ It saves you the trouble of setting up your Ruby environment and all that stuff, which can be a pain on Windows

    0 points
  • Jared HardyJared Hardy, 6 years ago

    Sass + Compass. We have been collecting all the great community extensions and libraries over at http://www.sache.in/

    0 points
  • Anton TrollbäckAnton Trollbäck, 6 years ago (edited 6 years ago )

    Go with the one having the largest, still growing, community. I would say that's SCSS (Sass).

    After learning on of them it's easy to pick up the other since they by and large do the same thing.

    0 points
  • Cole RobertsCole Roberts, 6 years ago

    SASS + Bourbon + Codekit. I find typing {} and ; (among other things) in LESS to be more of a drag than it is useful. Once you start writing mixins, extends and functions you'll never go back.

    0 points
  • Kerry RitterKerry Ritter, 6 years ago

    Just pick whatever looks like it suits you better. It's not like you are learning a new language or framework. I personally prefer LESS, but a ton of people prefer SASS. Both work great, just pick whichever you think you would prefer.

    0 points
  • Jason MelgozaJason Melgoza, 6 years ago

    Sass is a good place to start, though each preprocessor is more or less(no pun intended) the same. I recommend Dan Cederholm's book on Sass, it's a great overview on the subject.

    0 points
  • Damien ErambertDamien Erambert, 6 years ago

    At first I would advice you to try LESS because Sass can look a bit over-powered at first sight. Once you understand the concepts of LESS such as variables, mixins, nesting and includes, you may feel limited with LESS, and that's where Sass come in!

    Sass is basically the badass brother of LESS, it's very powerful and can be extended with awesome plugins such as Compass. Then once you gone on Sass, you can't go back :D

    0 points
  • Ghaida ZahranGhaida Zahran, 6 years ago

    Sass all the way.

    0 points
  • Tomasz WyderkaTomasz Wyderka, 6 years ago (edited over 5 years ago )

    http://cssondiet.com - a preprocessor for designers

    0 points
  • Ryan Hicks, over 6 years ago

    I recently, past 3 months, learned how to use Sass (and compass). Learned how to use it in one night and had a working site with it in 1-2 months. Very easy to use and learn. I'm not a dev, but I would recommend it.

    0 points
  • Alex CicanAlex Cican, over 6 years ago

    SASS. Check out http://mixture.io/ It has sped up my coding workflow a lot.

    0 points
    • Stephen WeirStephen Weir, 6 years ago

      +1 for Mixture really useful tool.

      For those of you who haven't seen mixture before it sits in between your editor and browser(s) It will live refresh as you save, compile all the common languages and alot more.

      Its not free, but you can pick it up for a one time fee of $39. well worth it in my opinion

      0 points
  • Nathan ManousosNathan Manousos, 6 years ago

    Just play with all of them, if you already know CSS it shouldn't take more than 15 minutes to get started.

    0 points
    • Elliott ReganElliott Regan, 6 years ago

      False. Some run on Ruby, some on Node, some in the browser with JS. There is paid software out there that makes it easier, but you can't just swap one out for the other.

      Also, to really learn SASS takes some time. 15mins might show oyu how "cool" it is, but you don't really get a feel for how powerful it is.

      1 point