Convert CSS to LESS

With this tool, you can quickly convert your existing CSS code into LESS syntax. LESS, which stands for “Leaner Style Sheets,” is a dynamic stylesheet preprocessor that extends standard CSS with additional functionality and can be compiled into regular CSS for use on either the client side or the server side.

One of the key features of LESS is support for variables, which begin with the @ symbol. Variables allow you to store reusable values such as colors, fonts, sizes, or spacing in a single place, making your stylesheets easier to manage and update.

Converting your CSS to LESS helps improve code organization, reduces repetition, and enables a more efficient styling workflow, while still ensuring full compatibility with standard CSS once compiled.

Options

Indent with

Put colors and fonts into variables

CSS code

Open file

LESS code

Everything is worked out in your browser and nothing is uploaded.

How to use it

The css to less converter is a web tool that will convert your css code to less code.

Add your CSSPaste your existing css code into the CSS box, or choose Open file to load a .css file from your computer.
Or try the sampleIf you would like to see how it works first, click Sample code and a sample css file is loaded to convert.
Choose your optionsPick tabs or spaces for the indent, and decide whether colors and font families should be moved into LESS variables.
Read the LESSThe new less code appears on its own in the LESS code box while you type. There is no Convert button to press.
Copy or downloadClick Copy to put the less code on the clipboard, or Download to save a code.less file to your computer.

Good to know

Nesting

Selectors that start the same are nested. html p goes inside html, and a:hover becomes &:hover inside a.

Rules are merged

Rules with the same selector are joined together. Compile the LESS and compare it with your original if the order of your rules matters.

Comments are removed

Comments are left out of the LESS code. The @charset, @import, @font-face and @keyframes rules are moved to the top.

Frequently asked questions

What is LESS?

LESS is a stylesheet language that is compiled into normal CSS. It adds variables, nesting and other features, and is compiled with the lessc command or by the less.js script.

What does the variables option do?

It finds the values of color, font-family, background-color, outline-color and the border color properties and stores each different value as a variable, such as @color_1. Change the value once at the top and it changes everywhere.

Why did I get a warning under the code?

A warning means part of your CSS could not be read, for example a { that is never closed, or a rule written inside another rule. The rest of the CSS is still converted.

Is anything uploaded?

No. The conversion is done in your browser, so your code never leaves your computer.