Doing More with Less

A pure CSS developer: “Damn… Can you come back in 15 minutes?”

A Less CSS developer: “Sure! Wait just a second… Done, look!”

What is less -------------------------------------- 1

Good thing about less---------------------------2

Let’s digging it!-----------------------------------3

Usage of less--------------------------------------4

Conclusion good of less-------------------------5

Ceate by Alexis Sellier

Less is open-source. Its first version was written in Ruby, then change to JavaScript

The indented syntax of Less is a nested metalanguage

The primary advantage of LESS is it will allow us to have more control over the CSS by nesting classes and IDs.

LESS works much more like a programming language:variables, nesting, mixins, operators and functions

In less we can define a variable and we can reuse them throughout the code which creates the code manageable

extents the capability of CSS with the use of operators and functions, which let you create CSS properties mathematically.

The primary advantage of LESS is it will allow us to have more control over the CSS by nesting classes and IDs. This space more clean and shorter

focus on consolidating cross-browser prefixes into single, concise declarations: use Mixins

First method:

Include the less.js file from less website

Make sure that you link your LESS file before the

Javascript file.

*Compiling The LESS File* By using command-line tool

Crunch : compiler Editor both

Less.app: compiler for Mac OS

SimpLess: compiler for Windows, Mac OS, Linux

WinLess: compiler for Window

Variables

Css file Less file

Define less variable

Functions

Less file

Output

Funny?? You could use less as client side language~ check more here

Operations

Less file

Define less variable

Nesting

Css file Less file

Mixins

Css file Less file

Import mixin Less file

Parametric mixins

less file

Mixin file

Import

Less import code

Once less compiler

Debug Part

If you finally debug compiler will show:

Write less code,

That’s faster to code up

Easier( cheaper) to maintain

And re-use in a project

Or among several projects