Doing More with LESS!

Doing more with LESS!

by Siddique Hameed, Senior Software Architect

March 2013

Introduction

As the old saying goes "God made man and tailor made the gentleman...". Using the same metaphor, one can argue that if HTML and JavaScript made web applications live, then Cascading Style Sheets(CSS) made them look beautiful and aesthetically appealing!

Starting off as a simple style-based rules language, CSS slowly evolved into a highly sophisticated language producing eye popping animations and visually-immersive transitions. With the advent and progress in HTML5/CSS3 specifications and mobile/web development technology stack, the prevalence and power of CSS is growing.

Though CSS has been around for a long time and almost every web site and application uses it for styling, there are various shortcomings of the language itself that web developers find hard time to work with. It is probably because CSS is just a visual representation language that primarily works on DOM selector rules and cascading principles. Comparing it with compiled/interpreted languages like JavaScript, Ruby, Java etc. can be considered comparing apples with oranges. So, here comes LESS to the rescue, lessening some of the pains of web developers in working directly with CSS.

The pre requisites of this article is some basic level understanding of CSS. I will be going through basic concepts of LESS to help understand how LESS can be a valuable tool in web application development.

What is LESS?

In a nutshell, LESS enhances CSS by adding dynamic characteristics to the language semantics. It provides CSS with programming constructs like variables, mixins, operations and functions, which developers use in other programming languages. It helps streamline CSS writing in a way that makes it effectively managed and easy to deal with.

Why do we use LESS?

Well, there are variety of reasons. For starters, it helps web developers and designers write more reusable and maintainable CSS code. It borrows some basic best practices available in other programming languages and applies them indirectly to CSS. As web applications grow bigger and better, the challenge of maintaining and making updates to CSS gets harder. This is especially true when we are dealing with desktop and mobile based web application sharing common CSS code. LESS can save lot of pain and frustration in these situations.

Here is another example... Let's say for instance, we are running a web/mobile-based enterprise application with many CSS files and resources. And suddenly, the company is going on a re-branding initiative where the Look & Feel(L&F) of the application needs to be changed to the company's newer vision/goal. If the CSS files were written using LESS in a manageable structure, it will be easier and quicker to update.

How do we use LESS?

LESS can be used on the client or server-side. In most cases, it is used directly on the web server by compiling .less files to .css files. It comes with lessc script to compile .less files to .css files. It requires Node.js installed. Since LESS is written entirely in JavaScript it can also be invoked using a Rhino/Ant script. Please look at the reference section for pointers on how to get LESS compilation work with Rhino.

LESS on server side

If you are familiar with Node.js, you can install LESS using npm(node package manager) using the command below.

 $ npm install -g less

Download LESS bundle

Here is the link to LESS's source bundle - https://github.com/cloudhead/less.js/archive/master.zip

After you download and extract the zip file there will be a lessc compilation script in bin folder, you can invoke lessc from command line as shown below.

 $ lessc buttons.less buttons.css

LESS on client side

LESS can also be used on browser/client-side directly by including a provided JavaScript file. It will dynamically evaluate/transform LESS content into CSS content while rendering on the browser.

The example below shows the html file including .less file.

  1. <!-- less-client-side.html -->
  2. <html>
  3. <head>
  4. <link rel="stylesheet/less" type="text/css"
  5.       href="less-client-side.less">
  6. <!-- less.js downloaded from LESS's website (http://lesscss.org) -->
  7. <script src="less.js" type="text/javascript"></script>
  8. <title>LESS in client side</title>
  9. </head>
  10. <body>
  11. <h1>H1 with yellow background!</h1>
  12. <h2>H2 with dark yellow background!</h2>
  13. </body>
  14. </html>
  1. <!-- less-client-side.less -->
  2. @light-yellow: desaturate(#fefec8, 10%);
  3. @dark-yellow:  desaturate(darken(@light-yellow, 10%), 40%);
  4.  
  5. h1 {
  6.   background: @light-yellow;
  7. }
  8.  
  9. h2 {
  10.   background: @dark-yellow;
  11. }

The output to the above HTML file should look something like below in the browser.

HTML yellow background

The classic example of this approach is LESS's website itself - http://lesscss.org. If you view the page source of the website's index page in the browser, you will notice the included JavaScript (less.js) and .less files.

LESS code syntax, semantics and; constructs

Following sections will go over the LESS-based code semantics and constructs. Please note these are the currently available LESS (v1.3.3) features. They may vary in the future versions.

Variables

Variables are basic building blocks in almost every programming languages. Since CSS doesn't have the concept of variables by default, LESS adds that feature to CSS indirectly. They can be declared global or local to CSS classes.

Let's take this simple example.

  1. //buttons.css
  2. .fancy-button {
  3.   -moz-border-radius: 12px;
  4.   -webkit-border-radius: 12px;
  5.   border-radius: 12px;
  6.   background: #006dcc;
  7.   border: 1px solid #0062c2;
  8.   color: #e1e1e1;
  9. }
  10. .not-so-fancy-button {
  11.   color: #e1e1e1;
  12.   background: #006dcc;
  13. }

There are several duplicated values in buttons.css. The above code can be written using LESS as shown below. The second code block below shows the output generated from lessc compilation. An important advantage is that changes to shared variables can be made in one place and wherever a variable is used will be automatically affected by that change.

  1. //variables.less
  2.  
  3. //global variables that is shared among CSS classes
  4. @default-fg-color: #e1e1e1;
  5. @default-bg-color: #006dcc;
  6.  
  7. .fancy-button {
  8.   //local variable
  9.   @radius: 12px;
  10.  
  11.   -moz-border-radius: @radius;
  12.   -webkit-border-radius: @radius;
  13.   border-radius: @radius;
  14.   background: @default-bg-color;
  15.   border: 1px solid #0062C2;
  16.   color: @default-fg-color;
  17. }
  18.  
  19. .not-so-fancy-button {
  20.   color: @default-fg-color;
  21.   background: @default-bg-color;
  22. }
  1. //lessc compilation output
  2. //variables.css
  3. .fancy-button {
  4.   -moz-border-radius: 12px;
  5.   -webkit-border-radius: 12px;
  6.   border-radius: 12px;
  7.   background: #006dcc;
  8.   border: 1px solid #0062C2;
  9.   color: #e1e1e1;
  10. }
  11. .not-so-fancy-button {
  12.   color: #e1e1e1;
  13.   background: #006dcc;
  14. }

Overriding Variables

In LESS, variables behave more like constants. It is mutable or can be overridden, but the last overridden value will take precedence while substituting values.

In the example below, we have two global variables, default-fg-color and default-bg-color. The default-bg-color is overridden globally in line #18 and default-fg-color is overridden in line #22 in local context (not-so-fancy-button class).

In the CSS output oin the second code block, the change to default-fg-color to #abcdef is applied in both fancy-button and not-so-fancy-button classes though the overriding of that variable happens on line #18, which is after the declaration of fancy-button class. Whereas, the default-bg-color overridden value is only affected in the no-so-fancy-button class.

  1. //override-variables.less
  2.  
  3. @default-fg-color: #ffffff;
  4. @default-bg-color: #006dcc;
  5.  
  6. .fancy-button {
  7.   @radius: 12px;
  8.   @border-color: #0062C2;
  9.   -moz-border-radius: @radius;
  10.   -webkit-border-radius: @radius;
  11.   border-radius: @radius;
  12.   background: @default-bg-color;
  13.   border: 1px solid @border-color;
  14.   color: @default-fg-color;
  15. }
  16.  
  17. //overriding 'default-fg-color' in global context
  18. @default-fg-color: #abcdef;
  19.  
  20. .not-so-fancy-button {
  21.   //overriding 'default-bg-color' in local context
  22.   @default-bg-color: yellow;
  23.   color: @default-fg-color;
  24.   background: @default-bg-color;
  25. }
  1. //lessc compilation output
  2. //override-variables.css
  3. .fancy-button {
  4.   -moz-border-radius: 12px;
  5.   -webkit-border-radius: 12px;
  6.   border-radius: 12px;
  7.   background: #006dcc;
  8.   border: 1px solid #0062c2;
  9.   color: #abcdef;
  10. }
  11. .not-so-fancy-button {
  12.   color: #abcdef;
  13.   background: #ffff00;
  14. }

Mixins

Mixins are like macros or methods in programming concepts. They support building reusable code blocks that can be embedded inside CSS classes.

From the previous example, let's say we want to design another button class that is the same as fancy-button, but is purple in color. We don't want to duplicate everything defined in the fancy-button class. Instead, we can embed fancy-button class inside purple-fancy-button and override only the properties we are interested in. The following example does exactly that. See line #20 in mixins.less file.

  1. //mixins.less
  2.  
  3. //global variables that is shared among CSS classes
  4. @default-fg-color: #e1e1e1;
  5. @default-bg-color: #006dcc;
  6.  
  7. .fancy-button {
  8.   //local variable
  9.   @radius: 12px;
  10.  
  11.   -moz-border-radius: @radius;
  12.   -webkit-border-radius: @radius;
  13.   border-radius: @radius;
  14.   background: @default-bg-color;
  15.   border: 1px solid #0062C2;
  16.   color: @default-fg-color;
  17. }
  18.  
  19. .purple-fancy-button {
  20.   .fancy-button; //mixin call
  21.   background: purple;
  1. //lessc compilation output
  2. //mixins.css
  3. .fancy-button {
  4.   -moz-border-radius: 12px;
  5.   -webkit-border-radius: 12px;
  6.   border-radius: 12px;
  7.   background: #006dcc;
  8.   border: 1px solid #0062C2;
  9.   color: #e1e1e1;
  10. }
  11. .purple-fancy-button {
  12.   -moz-border-radius: 12px;
  13.   -webkit-border-radius: 12px;
  14.   border-radius: 12px;
  15.   background: #006dcc;
  16.   border: 1px solid #0062C2;
  17.   color: #e1e1e1;
  18.   background: purple;
  19. }

Parametric Mixins

Mixins can also take parameters/arguments with optional default values. They are very useful in building code blocks with variable style properties.

  1. //parametric-mixins.less
  2. .fancy-button-mixin (@width: 100px) { //Note the parentheses
  3.   -moz-border-radius: 12px;
  4.   -webkit-border-radius: 12px;
  5.   border-radius: 12px;
  6.   background: #006dcc;
  7.   border: 1px solid #0062C2;
  8.   width: @width;
  9.   color: #e1e1e1;
  10. }
  11.  
  12. .fancy-button {
  13.   .fancy-button-mixin;
  14. }
  15.  
  16. .larger-fancy-button {
  17.   .fancy-button-mixin(200px);
  18. }
  1. //lessc compilation output
  2. //parametric-mixins.css
  3. .fancy-button {
  4.   -moz-border-radius: 12px;
  5.   -webkit-border-radius: 12px;
  6.   border-radius: 12px;
  7.   background: #006dcc;
  8.   border: 1px solid #0062C2;
  9.   width: 100px;
  10.   color: #e1e1e1;
  11. }
  12. .larger-fancy-button {
  13.   -moz-border-radius: 12px;
  14.   -webkit-border-radius: 12px;
  15.   border-radius: 12px;
  16.   background: #006dcc;
  17.   border: 1px solid #0062C2;
  18.   width: 200px;
  19.   color: #e1e1e1;
  20. }

Nesting Rules

Any strong CSS developer/designer might agree, inheritance and specificity are the key topics in understanding how CSS works under the cover(aka browser). It is generally considered a best practice to declare CSS classes specific to where it is applied when we want to isolate or not get affected by the selector/implicit inheritance rules defined in other CSS classes.

Nesting rules are an excellent way of representing inheritance between CSS selectors and maintain scope/specificity within CSS classes.

In the example below, 'h1' styling declared within fancy-widget class will be applied only to fancy-widget class and it will not be affected by h1 styling in other CSS class definitions.

  1. //nesting-rules.less
  2. .border-radius-mixin(@radius: 5px) {
  3.   -webkit-border-radius: @radius;
  4.   -moz-border-radius: @radius;
  5.   border-radius: @radius;
  6. }
  7.  
  8. .fancy-widget {
  9.   //nested/scoped within fancy-widget class,
  10.   //so it will be not be affected for other 'h1' elements
  11.   h1 {
  12.     text-align: center;
  13.   }
  14.  
  15.   &:hover { //Note the ampersand character. It will use the parent class name
  16.     font-weight: bold;
  17.   }
  18.  
  19.   a {
  20.       color: purple;
  21.       &:hover { //Note the ampersand character. It will use the parent class name
  22.         text-decoration: none;
  23.       }
  24.   }
  25.  
  26.   .fancy-button {
  27.     .border-radius-mixin;
  28.     background: #006dcc;
  29.     color: #ffffff;
  30.   }
  31. }
  1. //lessc compilation output
  2. .fancy-widget h1 {
  3.   text-align: center;
  4. }
  5. .fancy-widget:hover {
  6.   font-weight: bold;
  7. }
  8. .fancy-widget a {
  9.   color: purple;
  10. }
  11. .fancy-widget a:hover {
  12.   text-decoration: none;
  13. }
  14. .fancy-widget .fancy-button {
  15.   -webkit-border-radius: 5px;
  16.   -moz-border-radius: 5px;
  17.   border-radius: 5px;
  18.   background: #006dcc;
  19.   color: #ffffff;
  20. }

Operations

Operations are arithmetic operations(+, -, *, /, etc.), that can be performed on CSS style properties like size, color etc. They help define styling relationship between CSS classes and properties and hence building complex UI widgets with styling proportional or relative to each other.

Following example defines double-fancy-button to be twice the size of fancy-button and lighter-fancy-button to have lighter background than fancy-button.

  1. //operations.less
  2. @default-button-width: 100px;
  3. @default-border-radius: 12px;
  4. @default-background: #006dcc;
  5.  
  6.  
  7. .border-radius(@radius) {
  8.   -webkit-border-radius: @radius;
  9.   -moz-border-radius: @radius;
  10.   border-radius: @radius;
  11. }
  12.  
  13. .fancy-button-mixin (@width, @border-radius) {
  14.   width: @width;
  15.   .border-radius(@border-radius);
  16.   background: @default-background;
  17.   border: 1px solid #0062C2;
  18.   color: #e1e1e1;
  19. }
  20.  
  21. .fancy-button {
  22.   .fancy-button-mixin(@default-button-width, @default-border-radius);
  23. }
  24.  
  25. .double-fancy-button {
  26.   //Note the (*) asterisk and (/) slashes within parentheses.
  27.   //They represent operations and should be within parentheses
  28.   .fancy-button-mixin(@default-button-width * 2, @default-border-radius / 2);
  29. }
  30.  
  31. .lighter-fancy-button {
  32.   .fancy-button-mixin(@default-button-width, @default-border-radius);
  33.   background: (@default-background + #aaa);
  34.   color: #ffffff;
  35. }
  1. //CSS output from lessc compilation
  2. .fancy-button {
  3.   width: 100px;
  4.   -webkit-border-radius: 12px;
  5.   -moz-border-radius: 12px;
  6.   border-radius: 12px;
  7.   background: #006dcc;
  8.   border: 1px solid #0062C2;
  9.   color: #e1e1e1;
  10. }
  11. .double-fancy-button {
  12.   width: 200px;
  13.   -webkit-border-radius: 6px;
  14.   -moz-border-radius: 6px;
  15.   border-radius: 6px;
  16.   background: #006dcc;
  17.   border: 1px solid #0062C2;
  18.   color: #e1e1e1;
  19. }
  20. .lighter-fancy-button {
  21.   width: 100px;
  22.   -webkit-border-radius: 12px;
  23.   -moz-border-radius: 12px;
  24.   border-radius: 12px;
  25.   background: #006dcc;
  26.   border: 1px solid #0062C2;
  27.   color: #e1e1e1;
  28.   background: #aaffff;
  29.   color: #ffffff;
  30. }

Functions

LESS comes with some utility functions that are useful in defining style properties. They include string, numeric and color related functions.

The following example illustrates the use of the mix() function. Refer to this page for all available functions - http://lesscss.org/#reference

  1. //functions.less
  2. @red-color: #FF0000;
  3. @blue-color: #0000ff;
  4.  
  5.  
  6. .fancy-purple-button{
  7.   color: mix(@red-color, @blue-color);
  8. }
  1. //CSS output from lessc compilation
  2. .fancy-purple-button {
  3.   color: #800080;
  4. }

Importing LESS files

As with most programming languages, LESS promotes modularization. We can declare commonly used color variables inside colors.less and import that into other .less files using @import directive. This reduces redundancy and improve code reusability.

  1. //widgets.less
  2. @import "colors.less";
  3.  
  4. .widget {
  5.   ...
  6. }

Importing only once

The @import-once directive will be useful for commonly imported .less files where the imported file should not be re-imported even if its declared to be imported multiple times.

  1. //widgets.less
  2. @import-once "colors.less";
  3. @import-once "shadows.less";
  4. @import-once "colors.less"; // will be ignored as its already imported in line #2

Watching .less files

The .less files need to be compiled to .css so they can be rendered by the browser. Either LESS is used on client-side or server-side, it needs to be compiled to CSS. If the application is in active development state, then it is best to automate the compilation process with the trigger of changes to source files (.less).

In the browser side, we can append #!watch to the url, so LESS can automatically watch for changes to .less files. We can also call less.watch() from the browser's developer console to instruct LESS to watch for source file changes.

There are various Node.js modules that do the same thing on the server side. One such node module is https://github.com/alexkwolfe/node-less-compiler

Where do we start?

One of the best parts of LESS is its 100% backward compatibility with CSS. Meaning, any valid CSS file is a valid .less file. If we have a web application and want to start using LESS, we can just copy the contents of .css files as is into the .less files and slowly work on converting them into a structure with the language semantics and features provided by LESS. This is a good transition strategy for any legacy applications for turning them into LESS based setup.

Learning by example

LESS is used in many web applications and frameworks. A very popular example is Twitter Bootstrap UI framework

Download and refer to its source files (.less files) to get a good understanding on how it uses LESS.

This wiki page lists the frameworks using LESS -https://github.com/cloudhead/less.js/wiki/Frameworks-that-use-LESS.js

Credit

Thanks to Mark Volkmann for reviewing this article and providing feedback!

References