An Introduction To LESS, And Comparison To Sass

13 Sep

I’ve been using LESS religiously ever since I stumbled upon it months ago. CSS was never really an issue for me, in and of itself, but I USED TO BE intrigued by the theory of using variables to create something along the lines of a colour palette for my websites and themes. Having a colour palette with a hard and fast choice of options to choose between helps prevent me from going color crazy and deviating from a designated style.

Less-sass1 in An Introduction To LESS, And Comparison To Sass

As it turns out, LESS — and Sass for that matter — are much more than that. LESS and Sass share numerous similarities in syntax, including the following:

  • Mixins – Classes for classes.
  • Parametric mixins – Classes to you can pass parameters, like functions.
  • Nested Rules – Classes within classes, which reduce on repetitive code.
  • Operations – Math within CSS.
  • Color functions – Edit your colors.
  • Namespaces – Groups of styles that may be called by references.
  • Scope – Make local changes to styles.
  • JavaScript evaluation – JavaScript expressions evaluated in CSS.

The main difference between LESS and Sass is the best way they’re processed. LESS is a JavaScript library and is, therefore, processed client-side.

Sass, at the other hand, runs on Ruby and is processed server-side. NUMEROUS developers won’t choose LESS as a result of overtime needed for the JavaScript engine to process the code and output the modified CSS to the browser. There are a couple of ways around this. The way in which I AM GETTING around it’s to make use of LESS only through the development process. Once I’m finished, I copy and paste the fewer output right into a minifier after which right into a separate CSS file to be included in preference to the fewer files. An alternative choice is to make use of to compile and minify your LESS files. Both options will minimize the footprint of your styles, in addition to avoid any problems that will result from the client’s browser not running JavaScript. While this isn’t likely, it’s always a possibility.

Update: The statement above has caused quite a heated discussion and debate in comments and on Twitter. Please also consider the answer by Adam Stacoviak: “The reality is that Sass does require Ruby, but it doesn’t must be compiled to CSS at the server. It may be compiled locally (just as LESS has mentioned for itself) and the compiled CSS may also be shipped along with your project, WordPress theme, Expression Engine template, or whatever to the server similar to your previous CSS files. Since that is Smashing Magazine and the readership could vary dramatically, I MIGHT guess that an enormous component of you reading this comment are running a Mac. Well, Ruby is equipped by default on all Macs so getting Sass installed and running is solely a command away (sudo gem install sass).

Once you might have Sass installed you’ll be able to compile Sass locally into CSS and ship the code together with your project as I DISCUSSED. If you’re unsure on methods to start with Sass (or Compass) we’ve written a reasonably thorough guide at the matter titled, “Getting Started with Sass and Compass”. Thanks for clearing it up, Adam!

LESS Is More


Including LESS in something that you’re building is ready as easy because it gets:

  • Go get yourself a duplicate of less.js;
  • Create a file to position your styles in, reminiscent of style.less;
  • Add the next code in your HTML’s <head>:
  • <link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>

    Note the rel attribute of the link. You’re required to append the fewer/ to the top of the worth to ensure that LESS to work. You’re also required to incorporate the script immediately after the link to the way sheet. If you’re using HTML5 syntax, and that i can’t imagine why you wouldn’t be, you’ll be able to omit the type=”text/css” and the type=”text/javascript”.

    There’s also a server-side version of LESS. One of the simplest ways to put in LESS at the server is with Node Package Manager (NPM).


    If you’re a developer, variables are one among your best friends. Within the event that you’ll be using information repeatedly (on this case, a color), setting it to a variable is sensible. This way, you guarantee yourself consistency and possibly less scrolling about in search of a hex value to duplicate and paste. It’s also possible to perform a little fun little adding and subtracting of hex values that you really want to render. Take this example:

    @blue: #00c;@light blue: @blue + #333;@dark blue: @blue - #333;

    If we apply these styles to 3 divs, we will be able to see the gradated effect created by adding and subtracting the hex values to and from the unique blue:

    Blue-gradient in An Introduction To LESS, And Comparison To Sass

    The transition from @light blue to @blue to @dark blue.

    The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.


    On occasion, we would create a mode that’s intended for use repeat…

    Read More…
    [Source: Smashing Magazine Feed]

    Leave a comment

    Posted by on September 13, 2011 in Dating


    Leave a Reply

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

    You are commenting using your 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: