# Less.js — Dynamic Stylesheet Language That Extends CSS

> Less (Leaner Style Sheets) is a backwards-compatible CSS preprocessor that adds variables, mixins, functions, and nested rules to standard CSS. It compiles to plain CSS and runs in Node.js or directly in the browser.

## Install

Save as a script file and run:

# Less.js — Dynamic Stylesheet Language That Extends CSS

## Quick Use
```bash
# Install globally
npm install -g less

# Compile a .less file to CSS
lessc styles.less styles.css

# Watch and compile on change
lessc --watch styles.less styles.css
```

## Introduction
Less is a CSS preprocessor that extends standard CSS with variables, mixins, functions, and nesting. Originally created by Alexis Sellier and now maintained by the community, Less was one of the first tools to bring programming concepts to stylesheets. It compiles to clean, standard CSS that works in every browser.

## What Less.js Does
- Adds variables (`@color: #4D926F;`) for reusable values across stylesheets
- Supports mixins for reusable groups of CSS declarations with optional parameters
- Enables nested rules that follow the DOM structure for more readable code
- Provides built-in functions for color manipulation, math, and string operations
- Compiles server-side via Node.js or client-side in the browser via a JS include

## Architecture Overview
Less.js is a JavaScript-based compiler that parses `.less` files through a tokenizer, builds an abstract syntax tree, evaluates expressions and mixins, and outputs standard CSS. The compiler runs in Node.js for production builds or as a client-side script for development. Plugins can extend the language with custom functions, preprocessors, and postprocessors. Source maps are generated for browser debugging.

## Self-Hosting & Configuration
- Install via npm: `npm install less --save-dev`
- Integrate with build tools: webpack (less-loader), Vite, Gulp, or Grunt
- Configure compiler options in a `lessc` config file or via CLI flags
- Use `@import` statements to organize styles into modular files
- Enable source maps with `--source-map` for debugging in browser DevTools

## Key Features
- Backwards-compatible with CSS — any valid CSS file is valid Less
- Parametric mixins with guards for conditional logic
- Namespaces and scope for organizing large stylesheet codebases
- Lazy evaluation of variables allows forward references
- Plugin system for custom functions and transformations

## Comparison with Similar Tools
- **Sass/SCSS** — more popular today with a larger ecosystem; Less has simpler syntax and runs natively in the browser
- **Stylus** — more flexible syntax (optional braces and semicolons); Less is closer to standard CSS
- **PostCSS** — plugin-based CSS transformer; Less is an all-in-one preprocessor language
- **CSS Custom Properties** — native browser variables; Less offers mixins, functions, and nesting that custom properties cannot replace alone

## FAQ
**Q: Is Less still relevant with modern CSS features?**
A: Yes. While CSS has adopted variables, Less still offers mixins, functions, and nesting that reduce duplication in large codebases.

**Q: Can I use Less with React, Vue, or Angular?**
A: Yes. All major frameworks support Less via their build tool configurations (webpack, Vite, Angular CLI).

**Q: How does Less compare in compilation speed?**
A: Less compiles quickly for most projects. For very large codebases, Dart Sass may be faster due to its compiled runtime.

**Q: Can I migrate from Less to Sass gradually?**
A: Not directly in the same file, but you can run both preprocessors side by side and migrate file by file.

## Sources
- https://github.com/less/less.js
- https://lesscss.org/

---
Source: https://tokrepo.com/en/workflows/asset-aecfa463
Author: Script Depot