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
100
votes
3 answers

Does LESS have an "extend" feature?

SASS has a feature called @extend which allows a selector to inherit the properties of another selector, but without copying the properties (like mixins). Does LESS have this feature as well?
jonschlinkert
  • 10,872
  • 4
  • 43
  • 50
91
votes
5 answers

How to compile Less/Sass files in Visual Studio 2017+

In VS <= 2015 we can use a WebEssentials extension that takes care for compiling the less/sass files for us, but currently it does not support VS 2017. Is there a similar extension that can compile Less/Sass on build?
Mihail Shishkov
  • 14,129
  • 7
  • 48
  • 59
91
votes
8 answers

Fancy Media Queries with some LESS Magic

It would be nice to wrap css-styles for different resolutions within some css-classes using less. I'd like to do something like: footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; …
Andre Zimpel
  • 2,323
  • 4
  • 27
  • 42
84
votes
9 answers

Correct way to create rounded corners in Twitter Bootstrap

I've just started with Twitter Bootstrap and here is one question. I am creating custom
block, and I want it's bottom corners to be rounded. Is there any "correct" way to do this by using predefined classes, or I have to specify it manually…
Edward Ruchevits
  • 6,411
  • 12
  • 51
  • 86
80
votes
11 answers

Install node in Dockerfile?

I am user of AWS elastic beanstalk, and I have a little problem. I want to build my CSS files with less+node. But I don`t know how to install node in my dockerfile, when building with jenkins. Here is installation packages what I am using in my…
Delirium
  • 1,277
  • 3
  • 16
  • 27
74
votes
8 answers

Double border with different color

With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow. On the Web…
Mayeenul Islam
  • 4,532
  • 5
  • 49
  • 102
73
votes
1 answer

less.css sharing variables across files

I am using less.css to simplify my css styling. I'd like to declare a varaible in one less file and share its usage across my many less files. Is this possible? For example: english.less @languageFloat: left; chart.less div#footer a.web { …
vondip
  • 13,809
  • 27
  • 100
  • 156
70
votes
4 answers

Bootstrap variable overriding with LESS

I have been investigating for the whole day as I considered it would be worthwhile spending some time to learn best practice for customizing Bootstrap. I can see that there is a friendly page available for customizing elements selectively from…
Seong Lee
  • 10,314
  • 25
  • 68
  • 106
69
votes
4 answers

How to use if statements in LESS

I'm looking for some kind of if-statement to control the background-color of different div elements. I have tried the below, but it doesn't compile @debug: true; header { background-color: (yellow) when (@debug = true); #title { …
nkint
  • 11,513
  • 31
  • 103
  • 174
65
votes
13 answers

"Please try running this command again as Root/Administrator" error when trying to install LESS

I'm trying to install LESS on my machine and have installed node already. However, when I enter "node install -g less" I get the following error and am not sure what to do? FPaulMAC:bin paul$ npm install -g less npm ERR! Error: EACCES, unlink…
Stack Overflow
  • 905
  • 3
  • 9
  • 13
65
votes
1 answer

Is there a way to use variables in Less for the ~ operator, like ~"calc(100% - @spacing)";

Is there a way to use variables in less ~ operator, like ~"calc(70% - @spacing)"; When I have tried it it only works with static values like ~"calc(70% - 10px)"; Can I get the string to be evaluated prior to beeing set as a property.
patricjansson
  • 743
  • 1
  • 6
  • 8
64
votes
6 answers

Can Visual Studio 2013 generate CSS files from .less files?

Visual Studio 2013 is awesome, now with syntax highlight and autocomplete for .less files. But does it also generate the respective CSS files? Do I need to install other extensions for that?
Lucian
  • 3,981
  • 5
  • 30
  • 34
62
votes
3 answers

Understanding Bootstrap's clearfix class

.clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0; } &:after { clear: both; …
Lanston
  • 11,354
  • 8
  • 32
  • 37
60
votes
5 answers

Less/Sass debugging in Chrome Dev Tools/Firebug

How do you guys do maintenance on CSS built with Less/Sass? One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually…
Dave Stibrany
  • 2,369
  • 3
  • 21
  • 21
60
votes
6 answers

Is there a way to set a common image path for LESS files?

I am using the LESS styling language. Consider the following CSS: .side-bg { background:url(../img/layout/side-bg.jpg) top no-repeat; } Right now all of my images are in the folder ../img/ I wanted to be able to set a variable as the image…
JD Isaacks
  • 56,088
  • 93
  • 276
  • 422