Log In RSS spacer

January’s 12412: Researching LESS & SASS

Posted by Amber Weinberg

My first 12412 project was to research and learn about SASS. After the recommendation from several people, I also decided to check into LESS. I’d been hearing a lot about the two techniques and was quite skeptical – in fact it seems I’m often skeptical of new things out on the web. Most frameworks, shims and other “add-on”s are only a passing faze and tend to do more harm than good – and so with some trepidations I jumped in.

What is SASS & LESS?

Both SASS & LESS are CSS preprocessors, basically they’re created to help you code CSS quicker by allowing the use of basic programming principles. Both allow you to use variables, mixins, nested elements, functions and operators.

You basically put your CSS into a special file, and then when finished, your CSS is run through the preprocessor and it kicks out “normal” CSS. Huh.

I found LESS to be a lot easier to understand and install, although both of them worked pretty much the same way. You’re able to create variables within your CSS so you can reuse certain elements (for example, a hex code), and if it needs changing, you only have to do it in one place. Here’s where my inner-awesome-developer-sense kicks in. You can pretty much already do this with a basic class.

Another major feature in both SASS and LESS is the use of nesting, where you can “save” on repeating code by indenting elements instead of having to retype them, for example, if you indented p {} underneath an id of #header, then the CSS that’s printed out is actually #header p {}

While this seems pretty cool at first, I can easily see this as becoming cumbersome and crazy really quickly. When you’re not paying attention to what’s being outputted, your’re more likely to be lax in your coding.

Important Questions

I had several important questions before and after I read up on the technologies, and most of them really weren’t answered by any of the articles I read:

  1. What happens if another developer needs to edit the CSS and doesn’t know or realize a preprocessor is being used? How do you sync the two?
  2. When no longer writing CSS yourself, how do you control the structure and organization of the code? How do you ensure you’re optimizing it correctly?
  3. What happens if JS is down?
  4. Does it work with one line CSS?

All in all, I don’t think I’ll be using either SASS or LESS. Installation time, upkeep and the fact that it ruins the simplicity of CSS will keep me away. If you’re a developer who’s spent a lot of time optimizing your code and really learning the in’s of CSS (not just top level stuff), then you’ll find this pretty useless, as you already can quickly do the type of code it spits out.

I’m also worried on our recent reliance on Javascript and the trend of forcing languages and browsers to do something they’re not meant to do. It wasn’t even a year ago that everyone was worried about best practices and making sure we didn’t rely on Javascript for anything but the beauty layer. Now this is one more thing that can break.

Some of the features, like mixins and operators actually made the code a lot more convoluted an jumbled, and seemed to take a lot more code than if you were just to type it out correctly in the first place. I also don’t see the point of operators – CSS isn’t a programming language and you can’t dynamically update styles so why not just type in the correct number in the first place?

Final Thoughts

Perhaps I’m wrong and you disagree – maybe you think SASS or LESS is the greatest thing since sliced bread. It’s just not for me. I would love your thoughts on it though!

4 Responses to “January’s 12412: Researching LESS & SASS”

  1. spacer
    bripkens - January 31st, 2012 at 11:27

    Regarding the mentioned optimization problems, I feel that SASS and LESS take an approach that won’t result in any surprises. For instance, mixins will simply be copied to the correct position and nesting means that every nested rules will be prefixed with its parent’s rules. Therefore I don’t really share your opinion on this one.

    Regarding the JavaScript dependency, you can process SASS and LESS on the server side or when you are bundling your application. The client won’t notice any difference.

    You also say that SASS and LESS require more code, both technologies were developed to apply the DRY principle to CSS. So I don’t quite understand how you came to this conclusion.

    You may want to see real world examples that show how both technologies can be applied in a good way. Twitter’s bootstrap might be a good place to get started with appropriate use of LESS.

  2. spacer
    Gabri - January 31st, 2012 at 12:03

    Regarding the reliance on JavaScript, at first this was one of my concernes too but I found that there many apps that can be used to generate the CSS without any reliance on JS or Ruby in case of SASS. Here are some of them.

    for SASS/SCSS
    compass.handlino.com/
    mhs.github.com/scout-app/

    for LESS
    wearekiss.com/simpless
    incident57.com/less/

    for Both
    incident57.com/codekit/ “actually it has many other nice features too”

    I found that SASS is easier for me & I’m on the process of learning it & integrating it my workflow. I won’t use all the features thought, I’ll just choose the bits & pieces that I find useful like Variables for example.

  3. spacer
    Amber Weinberg - January 31st, 2012 at 14:13

    @bripkens I saw a lot more code to create the Mixin than it was to just type the rule out normally, that’s what I was talking about spacer

    @Gabri Thanks for the resources! Will do some more reading spacer

  4. spacer
    Stefan Peter - February 1st, 2012 at 08:39

    There’s no dependency on Javascript in SASS (or did I get this wrong?). It’s just an “superset” of CSS (sass-lang.com/) and makes it – in my opinion – much easier to handle CSS. Reduces “little change copy and paste”, change e.g. colors via variables, … It’s great.
    However, if you for example use compass (compass-style.org), which is based on SASS, it is in fact a lot of ‘superfluous’ generated code. But that must not be, because you do not have to use the mixins. Assuming a simple CSS file, and uses as a basis only variables and nesting a little bit, then the result remains compact. The code is clearer and more maintainable. Just my opinion.

Leave a Reply

Click here to cancel reply.

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.