Skip to main content

Less (Leaner Style Sheets)

Less (Leaner Style Sheets) is a powerful dynamic stylesheet language that serves as a robust CSS preprocessor. Developed earlier than Sass's widespread adoption of the SCSS syntax, Less is distinct because it is written in JavaScript and can be compiled in two ways:

  1. Client-side: Via a JavaScript file included in the browser (convenient for development).
  2. Server-side/Build Tool: Compiled into pure CSS using Node.js or task runners (standard for production).

Less shares many core concepts with Sass (variables, mixins, nesting) but often uses slightly different syntax and features, making it a strong alternative, especially in environments where JavaScript integration is preferred.


1. Core Features of Less​

Less aims to improve CSS efficiency and maintainability by introducing programming features into the styling layer.

A. Variables (@)​

In Less, variables are declared using the @ symbol. They allow you to define common values for colors, dimensions, and other properties, ensuring consistency across your stylesheet.

styles.less
// Define variables using @
@base-color: #3b82f6; // Blue
@link-color: darken(@base-color, 10%);
@spacing-large: 20px;

.header {
  background-color: @base-color;
  padding: @spacing-large;
}

.nav-link {
  color: @link-color;
}

B. Nesting and Parent Selector (&)​

Less supports nesting selectors to reflect the HTML structure, which helps organize CSS and reduces the repetition of parent selectors.

The & parent selector is crucial for referring back to the parent selector, often used for pseudo-classes or modifying classes (similar to BEM modifiers).

styles.less
.card-module {
  background: white;
  border-radius: 4px;
  padding: 15px;

  h3 { // Nested element
    color: @base-color;
    margin-bottom: 10px;
  }
  
  // Using the parent selector for pseudo-class (hover)
  &:hover { 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
}

C. Mixins​

Mixins allow you to embed all the properties of one class into another. Unlike Sass's @include, Less allows you to use any defined class name as a mixin.

Mixins can also accept parameters, making them highly flexible for reusing style logic.

Basic Mixin Example​

styles.less
// Define a class that will act as a mixin
.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.container {
  .clearfix(); // Include all properties from .clearfix
  max-width: 1200px;
}

Parametric Mixin Example​

styles.less
// Mixin with arguments and default values
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.button {
  // Call the mixin, overriding the default 5px radius
  .border-radius(10px); 
  border: 1px solid gray;
}

D. Operations (Math)​

Less allows you to perform mathematical operations (+, -, *, /) directly on numerical values, including units. This is particularly useful for calculating responsive grid widths, spacing, or component dimensions based on a single variable.

styles.less
@columns: 12;
@gutter: 1.5%;
@base-font-size: 16px;

.col-4 {
  // Calculate width dynamically
  width: (4 / @columns * 100%) - @gutter; 
}

.text-small {
  // Calculate font size relative to the base
  font-size: @base-font-size * 0.85; 
}

2. Advanced Less Features​

A. Functions​

Less includes a variety of built-in functions, especially for manipulating colors. These functions allow for dynamic adjustments to your palette, ensuring color harmony.

FunctionPurposeExample
lighten()Makes a color lighter.lighten(@base-color, 10%)
darken()Makes a color darker.darken(@base-color, 20%)
saturate()Makes a color more vivid.saturate(@base-color, 15%)
fade()Changes the opacity of a color.fade(@base-color, 50%)

B. Namespaces and Accessors​

Less provides a way to logically group styles or variables under a namespace, similar to a module. This prevents conflicts and makes code organized.

styles.less
// 1. Define the namespace as a set of rules
#themes {
  .dark-mode() {
    background: #333;
    color: white;
  }
}

.app-container {
  // 2. Access the mixin inside the namespace
  #themes > .dark-mode();
}

C. Importation (@import)​

Like Sass, Less supports the @import directive to break stylesheets into smaller, more manageable files. By default, Less treats imported files as Less files and merges them before compilation.

styles.less
// Imports and processes the content of _variables.less
@import "variables.less"; 
// Imports and processes the content of _buttons.less
@import "components/buttons";

Try It Yourself: CodePen Example​

Now that you've seen the core features of Less, try modifying and experimenting with the code in this CodePen example to see how Less can streamline your CSS development process.

3. Resources for Further Learning​

To effectively use Less in your projects, the official documentation is the primary resource.

Official Documentation​

The Less official site offers comprehensive guides, installation instructions (for Node.js), and detailed examples of all its features.