File Extension Guide📖 What is a LESS File?
A LESS file is a stylesheet written in the LESS language, a CSS preprocessor used by web developers. The name stands for Leaner Style Sheets, and it uses the .less extension. It looks like CSS but adds features that plain CSS lacks, such as variables, mixins, nesting and simple functions, which make large stylesheets easier to write and maintain.
The key thing to know is that a browser cannot read a LESS file directly. LESS is a step above CSS that gets compiled, or converted, into ordinary CSS before a website uses it. You write the .less file, a tool turns it into a .css file, and the browser loads that CSS. The extra features exist only in the LESS file, not in the CSS it produces.
LESS was created by Alexis Sellier in 2009 and is open source. It was first written in Ruby and later rebuilt in JavaScript, so it runs through Node.js. It became widely known because early versions of the Bootstrap framework used it, which is why you still meet .less files in many existing web projects today.
⚡ Quick Facts
| Full name | Leaner Style Sheets |
| Extension | .less |
| File type | CSS preprocessor stylesheet, plain text |
| Compiles to | Standard CSS |
| Runs on | JavaScript, through Node.js |
| Created by | Alexis Sellier |
| Released | 2009 |
| Licence | Open source |
| Adds to CSS | Variables, mixins, nesting, functions |
| Known from | Early Bootstrap versions |
🔤 What a LESS File Looks Like Inside
A LESS file reads much like CSS, with a few extras. Values can be stored in variables that start with an @ sign, and rules can be nested inside one another. This short example shows the idea.
When this compiles, the variables are replaced with their values and the nested .title rule becomes a normal .card .title selector. The result is plain CSS a browser understands, produced from a shorter and tidier source. A larger project also splits its styles across several .less files and pulls them together with @import statements, so the code stays organised before it is combined into one CSS output.
💻 How to Open a LESS File
Because LESS is written as code in a text file, you open it in an editor rather than a viewer. Any editor will show the contents, but one built for code makes it far easier to work with.
Code editors
Editors built for developers, such as VS Code, Sublime Text or Atom, highlight LESS syntax so variables, selectors and properties are easy to pick out. Add a LESS plugin and they will also warn about errors and compile the file for you. This is what most developers reach for when working on LESS.
Plain text editors
A basic editor like Notepad on Windows or TextEdit on a Mac will also open the file, since it holds nothing but text. That is enough to read it or make a minor tweak, but you lose the colouring and error checking a code editor gives. Keep the .less ending when you save so it stays a LESS file.
🔄 How to Compile a LESS File to CSS
A website cannot use a LESS file as it is, so you compile it into CSS first. The standard way uses the LESS compiler, which runs on Node.js.
Install the compiler
With Node.js on your system, install the LESS compiler through npm, its package manager, with a single command. This gives you the lessc tool.
Run the command
Point lessc at your file, such as lessc styles.less styles.css. It reads the LESS and writes a standard CSS file next to it.
Link the CSS
Link the compiled .css file in your HTML, not the .less file. The browser loads the CSS, which is what it can actually read.
Most developers avoid running that command by hand. In Visual Studio Code, a compiler extension such as Easy LESS builds the CSS automatically every time you save the .less file, and larger projects use build tools like Gulp or webpack to do the same as part of a wider workflow. For quick tests, LESS can even compile in the browser through its JavaScript library, though a pre-compiled CSS file is the right choice for a live site.
⚔️ LESS vs CSS
LESS is not a replacement for CSS but a layer on top of it. Every LESS file ends up as CSS, so the difference is about how you write the styles, not what the browser receives.
| Aspect | LESS | CSS |
|---|---|---|
| Read by browsers | No, it must be compiled first | Yes, directly |
| Variables | Yes, with the @ prefix | Yes, as native custom properties |
| Nesting | Yes, rules inside rules | Now supported in modern browsers |
| Mixins and functions | Yes | Limited |
| Extra tooling | Needs a compiler | None needed |
Any valid CSS is also valid LESS, so LESS is a superset of CSS. You use LESS to write styles more efficiently, and it hands the browser plain CSS in the end.
🆚 LESS vs Sass
LESS and Sass are the two best-known CSS preprocessors, and they do much the same job in different ways. Sass has become the more popular of the two.
LESS
Runs on JavaScript through Node.js, uses the @ prefix for variables and aims to stay close to CSS. Simple to learn, and common in older Bootstrap projects.
Sass
The more widely used preprocessor today, with a richer feature set and its popular SCSS syntax. It became the industry standard after Bootstrap switched to it.
Both compile to plain CSS and both add variables, nesting and mixins. For a new project many teams now choose Sass, while LESS remains a sensible choice for existing code that already uses it, especially older Bootstrap work.
🔀 Related Stylesheet Extensions
LESS is one of several formats in the styling world. Some are preprocessors like LESS, and one is the CSS they all produce.
.css | The standard stylesheet that browsers read, and the format every LESS file compiles into. |
.scss | The most common Sass syntax, a CSS-like preprocessor format and the main alternative to LESS. |
.sass | The original Sass syntax, which uses indentation instead of braces and semicolons. |
.styl | The Stylus preprocessor format, another CSS preprocessor with a flexible, minimal syntax. |
❓ Frequently Asked Questions
Since a LESS file holds only text, it opens in any editor. A developer editor like VS Code, Sublime Text or Atom is the best pick, because it highlights the syntax, warns about errors, and can compile the file with a LESS plugin. Notepad or TextEdit will do for a quick read or a small tweak.
LESS stands for Leaner Style Sheets. It is a CSS preprocessor, a language that extends CSS with features like variables and mixins and then compiles into standard CSS. The extension is .less, and the file is plain text that developers write and edit like other code.
Install the LESS compiler through npm on a system with Node.js, then run a command such as lessc styles.less styles.css, which reads the LESS and writes a CSS file. Link that CSS in your HTML, not the LESS file. Most code editors and build tools can also compile LESS automatically each time you save, which is how developers usually work.
Browsers only understand plain CSS, and a LESS file contains extra features like variables and mixins that are not part of CSS. Those features have to be turned into ordinary CSS first, which is what compiling does. Once the LESS is compiled to a .css file, the browser reads that. This is why a website links the compiled CSS rather than the .less source.
Both are CSS preprocessors that add variables, nesting and mixins and compile to plain CSS. LESS runs on JavaScript through Node.js and uses the @ prefix for variables, while Sass has a richer feature set and its popular SCSS syntax. Sass is the more widely used today and became the industry standard after Bootstrap switched to it, though LESS is still common in existing projects.
Yes. LESS is a superset of CSS, which means any valid CSS is also valid LESS. You can put plain CSS in a .less file and it works, then add LESS features like variables or nesting wherever they help. This makes it easy to move an existing CSS file into LESS by simply renaming it and building from there.
It is still used, though less than before. Sass has become the more popular preprocessor, and modern CSS has gained native features like variables and nesting that reduce the need for a preprocessor at all. Even so, LESS remains common in existing projects, especially those built on older Bootstrap versions, so developers still open and edit .less files regularly.
No, though they are closely related. A LESS file is the source you write, with extra features, and a CSS file is what it compiles into for the browser. They are both plain-text stylesheets, but only the CSS is what a website actually loads. Think of the LESS file as the recipe and the CSS file as the finished dish.
Install a LESS compiler extension from the VS Code marketplace, such as Easy LESS, then simply save your .less file. The extension builds the matching .css file automatically each time you save, with no command to run yourself. This save-and-compile setup is the most common way developers work with LESS in VS Code, and it can also generate source maps to help with debugging.
An @import statement pulls another LESS file into the current one, which lets you split a large stylesheet into smaller, organised pieces. For example, you might keep colours, layout and components in separate .less files and import them into one main file. When the project compiles, the imported files are combined into a single CSS output that the browser loads.
📝 Summary
A LESS file is a CSS preprocessor stylesheet, saved with the .less extension and written in the Leaner Style Sheets language. It looks like CSS but adds variables, mixins, nesting and functions, and it compiles into standard CSS that browsers can read. Created by Alexis Sellier in 2009 and run through Node.js, LESS became well known through early Bootstrap versions. Open and edit one in any text editor, ideally a code editor like Visual Studio Code, and compile it to CSS with the lessc tool. Sass has since become the more popular preprocessor, but LESS is still common in existing projects.