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.
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.
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:
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:
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…