Questions tagged [less]

Less is an open-source stylesheet preprocessor that extends CSS with dynamic behavior such as variables, mixins, operations and functions. For the UNIX command, use [less-unix].

Less is an open-source stylesheet preprocessor that extends with dynamic behavior such as variables, mixins, operations and functions. It was developed by Alexis Sellier, more commonly known as cloudhead and is now hosted on GitHub.

Less is written in JavaScript and can be run both on the client-side and the server-side (with Node.js, Rhino, etc.). The code compiles the Less syntax into CSS and thus what is ultimately rendered by the browser is CSS, not Less. The syntax itself is similar to CSS and you can use it seamlessly along with regular CSS. The file extension of Less files is .less.

External Links:

Online Less Compilers: (Recommended by the official Less website)

Online Demo Environments:

The following websites (also recommended by the official Less website) can be used to create a live demo of the problem area and can be linked in the question to further illustrate complex problems.


The name less is also the name of a unix command which displays a file. For questions on that topic, use .

7295 questions
45
votes
2 answers

Differences between SCSS and LESS

I have read about SCSS and LESS. But I can't understand the differences clearly. I know SCSS and LESS both have more functionality of CSS (I mean extension of CSS). What is different between SCSS and LESS? Which one is better?
Banukobhan Nagendram
  • 2,335
  • 3
  • 22
  • 27
43
votes
7 answers

Less Compiler for Linux

Is there a something like less.app that can compile LESS into CSS? I don't care about a GUI and don't want to install it via NPM (node.js package manager.)
Rigel Glen
  • 1,289
  • 3
  • 14
  • 20
43
votes
3 answers

How to compile .less files on save in Visual Studio 2015 (preview)

Ok, so I've created a new ASP.Net 5/MVC 6 project in Visual Studio 2015 Preview. In keeping with our current method of doing things, for styling I want to use .less files. Creating the files is straightforward, but Web Essentials no longer compiles…
Maverick
  • 4,449
  • 4
  • 36
  • 46
43
votes
4 answers

CSS3 Keyframe Animations: End and stay on the last frame

I've run into some difficulty trying to play a CSS3 keyframe animation and have the relevant element stick at the last frame after the animation has completed. To my understanding, the property that I have to set for this to work should be…
Joshua Jennings
  • 517
  • 1
  • 4
  • 13
42
votes
2 answers

LESS: Better to use inheritance or multiple classes

I have a LESS file with an inputbase(){} class. I use it on a lot but not every input type. When I compile I have a lot of repeated styles in the outputted CSS file. I took a look out how bootstrap use LESS for their grid and they use the same…
MaxWillmott
  • 2,170
  • 2
  • 23
  • 34
42
votes
1 answer

Sublime Text wrap selection with snippet

I've been digging into Sublime's snippets, plugins and macros, but I can't seem to find what I'm looking for. I'm trying to turn this: .content { color: @blue; } Into this: .content { color: darken(@blue, 5%); } Ideally, I'd be able to…
saltcod
  • 2,003
  • 5
  • 21
  • 36
41
votes
7 answers

How do you create multiple box-shadow values in LESS CSS

Read This There are several "correct" answers. Since this question gets a lot of traffic, I figured I should keep up with what (I think) the best answer is (based on the LESS documentation) as the LESS project matures, and change my accepted answer…
Mike McLin
  • 3,627
  • 7
  • 41
  • 49
41
votes
2 answers

Is it bad practice to override LESS variables?

I'm using Twitter Bootstrap on a project at the moment, including the LESS files and compiling with some additional LESS code that we've written. The latest release has meant we need to override some of the Bootstrap LESS variables. One option here…
sync
  • 5,350
  • 2
  • 23
  • 32
40
votes
2 answers

How to use less css with django?

I'm using twitter bootstrap and django. I've got my dependencies handled with a pip requirements file. I've got 2 questions: How can I use less while I'm developing so it'll get compiled when I edit one of my less files? How can I create some kind…
user1037541
  • 897
  • 2
  • 9
  • 11
40
votes
2 answers

How to add *.less to IIS 7.0?

I have set up a virtual application on my localmachine and it is running but it's not loading the CSS file. And I am using the lessCSS for styling my application and I think the reason here for not loading the css here is that LESSCSS style sheet…
Safran Ali
  • 4,477
  • 9
  • 40
  • 57
40
votes
4 answers

Bootstrap 3 extra large (xl) columns

In Bootstrap's LESS build can someone please tell me how to add a fifth device size, extra large (col-xl-#)?
dubloons
  • 1,136
  • 2
  • 12
  • 25
39
votes
10 answers

Enable inline javascript in LESS

I would like to use inline js in my less files but I get the following message: Inline JavaScript is not enabled. Is it set in your options? How can I enable that?
pharkasbence
  • 957
  • 3
  • 9
  • 25
39
votes
1 answer

Less: how to write :hover and :focus

I just started learning Less and would like to have an outcome like this: .navbar .nav > li > a { /* some rules */ } .navbar .nav > li > a:hover { /* some rules */ } .navbar .nav > li > a:focus { /* some rules */ } I can't figure out…
Pelangi
  • 401
  • 1
  • 4
  • 6
38
votes
4 answers

How we can use @font-face in Less

In Less, it seems almost impossible to use @font-face selector. Less gives errors when I try to use font-family: my_font Here is how I try to use it: @font-face { font-family: my_font; src: url('http://contest-bg.net/lg.ttf'); } p { …
Alex Kolarski
  • 3,255
  • 1
  • 25
  • 35
38
votes
4 answers

How to make .less files to have .css syntax highlight in Vim?

I've been using LESS and I find it very useful I would like to have CSS syntax highlight in Vim with all .less files. Any suggestions?
alexchenco
  • 53,565
  • 76
  • 241
  • 413