DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > LESS is More: The Dynamic Stylesheet Language

LESS is More: The Dynamic Stylesheet Language

Antonio Santiago user avatar by
Antonio Santiago
·
Jan. 12, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
4.19K Views

Join the DZone community and get the full member experience.

Join For Free

Woow!!! That is the word that best defines Less.

From time to time someone creates something really useful with a touch of magic. John Resig creates jQuery, not the only one neither the first one, but it is the most famous JavaScript library.


Now, Alexis Sellier (alias cloudhead) has created the amazing Less tool which can be defined as “The dynamic stylesheet language”.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions


A brief sample

Imagine a web project with many lines of CSS defining your nice styles about buttons, borders, backgrounds, etc. Image you have a nice #aaaaaa color shared among many elements (borders, text color, …). What happends if you decide to change that color? you need to rewrite the color code on every place you put it.

The magic of Less allows you to define a color variable and use it around. Later if you decide to change the color, simply change the variable value.

How it works?

Instead create CSS files you need to create LESS files, they are similar to CSS bit more “powerful” (you can use variables, functions, …).

Less library is responsible to read the LESS file and create a CSS file for you.

How to use

You can use LessCSS in different ways. Developing it is best to use the “dynamic” way, that is, include the Less JavaScript code in your page a LESS file and let Less code to create and “inject” the generated CSS in your page.

In a production environment, once set the LESS file, it is better to compile it to a CSS and include this last.

 

Source: http://acuriousanimal.com/blog/2011/08/29/a-word-about-less/

LESS

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • When Writing Code Isn't Enough: Citizen Development and the Developer Experience
  • MACH Architecture Explained
  • A Brief History of the DMCA
  • Is Your Code DRY or WET?

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo