Posted on by & filed under Content - Highlights and Reviews, Programming & Development, Web Development.

As web applications grow in complexity, so does the burden of building and maintaining them. HTML and other web standards continue to evolve to accommodate ever demanding web applications. Third-party frameworks and tools are developed to make developer’s lives easier, and LESS is one such tool that is designed to ease the work of web designers and developers.

LESS is essentially a preprocessor for Cascading Style Sheets (CSS) documents. CSS is used to style the various elements that make up a web page. As web applications have become more powerful and complex, the task of maintaining style sheets has become increasingly more difficult. Due to this complexity, the style sheets of big web applications are divided into manageable modules with tools needed to keep track of them.

LESS is one of these tools. LESS extends CSS with new syntax that allows styles to be expressed in a more compact form, and allows the relationship between various styles to be expressed explicitly. It introduces into CSS features like variables, mixins, operations and functions.

To use LESS in a web page, simply include the LESS JavaScript file:

Then any LESS style sheet can be linked to the web page as follows:

Here, the file “styles.less” is a LESS style sheet.

Variables allow a common value to be defined only once and then this value can be used multiple times (read this section in Instant LESS CSS Preprocessor How-to to learn more about variables in LESS). This enables the value to be easily updated and all of the styles will be updated automatically. For example:

This will be compiled to:

Mixins allow multiple properties to be shared across multiple styles. Once a mixin has been defined, it can be embedded into multiple styles. Also if arguments are used, mixins can behave as ‘functions’. For example:

Here ‘rounded-corners’ is a mixin that takes an optional argument ‘radius’. It is included by header and footer. Once compiled, the generated CSS would look like the following:

Similarly, LESS has features like nested rules and functions/operations that are beyond the scope of this post. The book Pro CSS for High Traffic Websites, covers LESS and other CSS preprocessors in the Dynamic CSS chapter.

Safari Books Online has the content you need

Check out these CSS books available from Safari Books Online:

Although web standards-based websites can scale effectively—and basic CSS will give you basic results—there are considerations and obstacles that high traffic websites must face to keep your development and hosting costs to a minimum. There are many tips and tricks, as well as down-to-earth best practice information, to make sure that everything runs quickly and efficiently with the minimum amount of fuss or developer intervention. Targeted at “high traffic” websites—those receiving over 10,000 unique visitors a day—CSS for High Traffic Websites gives you inside information from the professionals on how to get the most out of your web development team.
CSS is a language for describing the presentation of elements in a document marked up in HTML. It enables you to rapidly create Web designs that can be shared by multiple pages, accelerates development time, and is the essential tool for building standards-compliant sites. This The CSS Pocket Guide works as a concise introduction to CSS3 and serves as a handy reference.
HTML and CSS are the workhorses of web design, but using them together to build consistent, reliable web pages is difficult if you’re relying on outdated, confusing, and unnecessary HTML hacks and workarounds. With HTML & CSS: The Good Parts, you’ll learn how to work with these tools far more effectively than is standard practice for most web developers. You’ll learn how to connect the underlying theory and design of HTML and CSS to your everyday work habits.

About the author

Shaneeb Kamran is a hardcore programmer at heart and an aspiring entrepreneur by day. His programming journey started at the age of 12 and ever since he has dabbled himself in every new and shiny technology he could get his hands on. He is currently involved in a startup that is working on cloud computing products. He can be reached at

Tags: Cascading Style Sheets, CSS, Javascript, LESS, mixins, variables,

Comments are closed.