Less (stylesheet language)

Less (stylesheet language)
Name	Less
Paradigm	Declarative programming, Stylesheet language
Designer	Alexis Sellier
Developer	The Apache Software Foundation
Released	0 2009
Latest release version	4.2.0
Latest release date	04 October 2023
Typing	Dynamic typing
Influenced by	Cascading Style Sheets, Sass (stylesheet language)
Influenced	Stylus (stylesheet language)
Operating system	Cross-platform
License	Apache License 2.0
Website	https://lesscss.org

Less (stylesheet language). Less, often stylized as LESS, is a dynamic preprocessor stylesheet language that can be compiled into standard Cascading Style Sheets (CSS). Originally designed by Alexis Sellier and now a project of The Apache Software Foundation, it extends CSS with powerful features like variables, mixins, nested rules, and functions, enabling more maintainable and themable stylesheets. It is implemented primarily with JavaScript and can run on both the client-side in web browsers like Google Chrome and server-side using Node.js.

Overview

Less was created to address the limitations of Cascading Style Sheets by introducing concepts from traditional programming languages into stylesheet authoring. Its development was influenced by the earlier Sass (stylesheet language), and it shares the core goal of making CSS more dynamic and easier to manage for large-scale projects. The language gained significant adoption within the web development community, particularly among users of JavaScript frameworks, and is maintained under the open-source Apache License 2.0. Key implementations include the original Ruby (programming language) version and the more widely used JavaScript port, which integrates seamlessly with modern build tools like webpack and Gulp.js.

Features

Less introduces several features that are not native to standard Cascading Style Sheets. These include variables for storing values like colors and fonts, which promotes consistency and simplifies theming across a project. Mixins allow developers to include groups of CSS properties from one rule-set into another, facilitating code reuse. The language supports nested rules, mirroring the HTML structure for cleaner and more intuitive code organization. Other notable features are functions and operations for performing calculations, namespacing to bundle mixins, and scope control to manage variable visibility, similar to concepts in languages like JavaScript.

Syntax

The syntax of Less is designed to be as close as possible to standard Cascading Style Sheets, making it relatively easy for developers familiar with CSS to adopt. Variables are defined with the `@` symbol, such as `@primary-color: #337ab7;`. Mixins are invoked by simply including a class name, and they can also accept parameters, behaving like functions in languages such as JavaScript. Nested rules are written inside a parent rule, and the `&` operator is used to reference the parent selector, a feature inspired by Sass (stylesheet language). The language also supports string interpolation and escaping for dynamic value generation.

Usage

Less is commonly used in web development projects to streamline the creation and maintenance of Cascading Style Sheets. It is frequently integrated into front-end build processes using task runners like Gulp.js or module bundlers like webpack, often in conjunction with frameworks such as Bootstrap (front-end framework), which originally used Less for its theming system. Developers write `.less` files, which are then compiled into standard `.css` files that can be served to web browsers like Mozilla Firefox and Microsoft Edge. This compilation can occur at development time or dynamically on the client-side, though the former is preferred for performance in production environments.

Compilation

Less code must be compiled into standard Cascading Style Sheets before it can be interpreted by a web browser. This can be achieved through several methods, including using the official JavaScript compiler via Node.js, which is the most common approach in modern development workflows. Other compilation options include client-side compilation in the browser using the `less.js` library, though this is generally discouraged for production due to performance overhead. Many integrated development environments and code editors, such as Visual Studio Code, offer extensions or plugins that provide real-time compilation and syntax highlighting for Less files.

Comparison with other CSS preprocessors

Less is often compared to other popular CSS preprocessors like Sass (stylesheet language) and Stylus (stylesheet language). While Sass (stylesheet language) offers two syntaxes (the indented Sass syntax and the CSS-like SCSS), Less strictly maintains a CSS-like syntax, which some developers find more approachable. In terms of features, Sass (stylesheet language) has historically had a more extensive set of programming constructs and a larger ecosystem, supported by communities like the Sass Core Team. Stylus (stylesheet language), influenced by both, offers more syntactic flexibility. The choice between them often depends on project requirements, team familiarity, and integration with tools like Bootstrap (front-end framework) or React (JavaScript library).

Category:Style sheet languages Category:Apache Software Foundation projects Category:JavaScript programming language family Category:Cross-platform software