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 .

7046 questions
453
votes
5 answers

Disable LESS-CSS Overwriting calc()

Right Now I'm trying to do this in CSS3 in my LESS code: width: calc(100% - 200px); However, when LESS compiles it is outputting this: width: calc(-100%); Is there a way to tell LESS not to compile it in that manner and to output it normally?
AJStacy
  • 5,035
  • 3
  • 14
  • 31
343
votes
4 answers

Less aggressive compilation with CSS3 calc

The Less compilers that I'm using (OrangeBits and dotless 1.3.0.5) are aggressively translating body { width: calc(100% - 250px - 1.5em); } into body { width: calc(-151.5%); } Which is obviously not desired. I'm wondering if there is a way to…
Nick Babcock
  • 5,842
  • 3
  • 24
  • 39
286
votes
7 answers

Twitter Bootstrap Customization Best Practices

I'm working with Bootstrap 2.0.3 using LESS. I want to customize it extensively, but I want to avoid making changes to the source whenever possible as changes to the libraries are frequent. I am new to LESS so I don't know how its compilation…
ATL_DEV
  • 8,679
  • 11
  • 49
  • 94
233
votes
9 answers

import .css file into .less file

Can you import .css files into .less files...? I'm pretty familiar with less and use it for all my development. I regularly use a structure as follows: @import "normalize"; //styles here @import "mixins"; @import "media-queries"; @import…
Mr Jonny Wood
  • 3,666
  • 5
  • 26
  • 40
179
votes
2 answers

Modify alpha opacity of LESS variable

Using LESS, I know that I can change the saturation or tint of a color variable. That looks like this: background: lighten(@blue, 20%); I want to change the alpha opacity of my color, though. Preferably like this: background: alpha(@blue, 20%); Is…
ben
  • 1,957
  • 2
  • 14
  • 16
141
votes
1 answer

Is it possible to use vh minus pixels in a CSS calc()?

I have following CSS rule in a Less file: .container { min-height: calc(100vh - 150px); } Which doesn't work at all. I want to make container full window height and minus header, footer fixed height. How can I do that?
Alexander Kim
  • 12,483
  • 10
  • 71
  • 113
135
votes
4 answers

How do I convert a hexadecimal color to rgba with the Less compiler?

I have the following code: @color : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, …
chubbyk
  • 5,952
  • 12
  • 46
  • 65
130
votes
6 answers

Concatenate strings in Less

I think this is not possible, but I thought I ask in case there is a way. The idea is that I have a variable for path to web resource folder: @root: "../img/"; @file: "test.css"; @url: @root@file; .px { background-image: url(@url); } I get…
juminoz
  • 3,240
  • 7
  • 32
  • 48
116
votes
5 answers

Immediate Child selector in LESS

Is there anyway to have LESS apply the immediate child selector ( > ) in its output? In my style.less, I want to write something like: .panel { ... > .control { ... } } and have LESS generate something like: .panel > .control {…
Dave
  • 10,605
  • 9
  • 40
  • 52
116
votes
11 answers

How to use font-awesome icons from node-modules

I have installed font-awesome 4.0.3 icons using npm install. If I need to use it from node-modules how should I use it in html file? If I need to edit the less file do I need to edit it in node-modules?
Govan
  • 7,561
  • 5
  • 23
  • 41
113
votes
7 answers

Is there a SASS.js? Something like LESS.js?

I have used LESS.js before. It's easy to use, something like I saw SASS.js. How can I use it in a similar way? Parsing a SASS file…
Jiew Meng
  • 74,635
  • 166
  • 442
  • 756
109
votes
12 answers

How to namespace Twitter Bootstrap so styles don't conflict

I want to use Twitter Bootstrap, but only on specific elements, so I need to figure out a way to prefix all Twitter Bootstrap classes with my prefix, or use the less mixins. I'm not experienced with this yet so I don't quite understand how to do…
Andrew
  • 196,883
  • 184
  • 487
  • 673
106
votes
4 answers

Calculating width from percent to pixel then minus by pixel in LESS CSS

I will calculate width in some element from percent to pixel so I will minus -10px via using LESS and calc(). It´s possible? div { span { width:calc(100% - 10px); } } I using CSS3 calc() so it doesn't work: calc(100% -…
l2aelba
  • 18,585
  • 20
  • 90
  • 131
105
votes
3 answers

LESS CSS nesting classes

I'm using LESS to improve my CSS and am trying to nest a class within a class. There's a fairly complicated hierarchy but for some reason my nesting doesn't work. I have this: .g { float: left; color: #323a13; .border(1px,#afc945); …
newbie_86
  • 4,214
  • 16
  • 53
  • 85
96
votes
2 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,046
  • 3
  • 38
  • 50
1
2 3
99 100