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
465
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,175
  • 4
  • 17
  • 31
358
votes
5 answers

How to prevent Less from trying to compile CSS calc() properties?

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
  • 6,111
  • 3
  • 27
  • 43
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
  • 9,256
  • 11
  • 60
  • 102
240
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,806
  • 5
  • 30
  • 42
203
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
  • 17,304
  • 23
  • 100
  • 157
187
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
  • 2,037
  • 2
  • 15
  • 16
138
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
  • 6,212
  • 13
  • 53
  • 67
133
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,168
  • 7
  • 35
  • 52
124
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,751
  • 5
  • 26
  • 42
123
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
  • 12,117
  • 10
  • 46
  • 52
115
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
  • 84,767
  • 185
  • 495
  • 805
115
votes
13 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
  • 227,796
  • 193
  • 515
  • 708
114
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,520
  • 17
  • 58
  • 89
114
votes
4 answers

What does an "&" before a pseudo element in CSS mean?

In the following CSS taken from Twitter Bootstrap what does the ampersand (&) character mean? .clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; } &:after { clear: both; } }
neodymium
  • 3,686
  • 6
  • 23
  • 31
105
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
  • 21,591
  • 22
  • 102
  • 138
1
2 3
99 100