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
3
votes
1 answer

LESS in Chrome not substituting variables

I am running LESS locally (or trying to). I'm running OSX, but I don't think it matters for this. I used the following to allow it to run locally: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -allow-file-access-from-files I get…
Chet
  • 1,209
  • 1
  • 11
  • 29
3
votes
1 answer

How can I use media queries more efficiently with LESS?

I'm working with Bootstrap and LESS on a responsive webpage design. One of the reasons I have enjoyed LESS in the past is because it can keep all attributes for HTML elements together. What I have below is some rules to define a .sponsors block, and…
cwd
  • 53,018
  • 53
  • 161
  • 198
3
votes
2 answers

How to capture hover events on css (less) box-shadow

I want to create a button that looks as if it rises as you hover over it. I'm currently using boxshadow to create the visual look of the raised button. Unfortunately, as would probably be expected, the shadow doesn't capture the hover events, which…
Thane Brimhall
  • 9,256
  • 7
  • 36
  • 50
3
votes
1 answer

Browser SCSS processor?

I have a develop where I can't install anything (it's a long story). I need to develop just with plain HTML / Browser JS and I want to use a CSS preprocessor. I like SCSS (SASS) but in order to use it I have to install ruby on my machine, execute…
A. Matías Quezada
  • 1,886
  • 17
  • 34
3
votes
2 answers

Using less with twitter bootstrap

I'm trying to use one of the styles from http://bootswatch.com/. I would like to apply the .less version of their styles to bootstrap.css. To do so I'm doing the following as described in http://lesscss.org/#usage:
don
  • 4,113
  • 13
  • 45
  • 70
3
votes
1 answer

Chaining keyframe attributes with less

so I'm trying to create a LESS mixin for css3 keyframes. The way to chain id's and classes is normally like: #idOne, #idTwo, .classOne, .classTwo { ... } That's nothing new and no big deal. What I'm trying now is to create the following…
zitscher
  • 137
  • 2
  • 12
3
votes
1 answer

How can I automatically generate sprites for my less file?

I have a project with less files which reference images via URLs. The project is delivered to the user as a single page application, with all JS minfiied and sent as one file. However, images are sent in separate files. To eliminate this latency, I…
Mike
  • 23,892
  • 18
  • 70
  • 90
3
votes
0 answers

Vertically text in Internet Explorer 8/9 inside a table

To the help of the user "bookcasey", I did a table having the header labels vertically oriented. It works in the following browser (Firefox, Google chrome, safari) except Internet Explorer 8/9. With IE 8/9 it works but the width of the column is…
js999
  • 2,063
  • 4
  • 26
  • 34
3
votes
2 answers

Most elegant way to make RGBa Browser Support for IE8 by using LESS

I am using less in order to make a div with a background colour transparent. Here is my code which does not work for IE8: background-color: fade(@mycolor, @transparency); My question is: what is the best way, since I am using less, to get the same…
Lorraine Bernard
  • 13,000
  • 23
  • 82
  • 134
3
votes
2 answers

conditional execution in less

By using LESS, I am trying to execute a conditional inside a mixing Here is my code .my-mixing (@isInverse) { .navbar { when(@isInverse) { .navbar-inverse; } } } .my-mixing(true); it does not work. Any hints?
Lorraine Bernard
  • 13,000
  • 23
  • 82
  • 134
3
votes
1 answer

Catch and trace middleware exceptions (less-middleware) in Express 3.0

First of all, I tried to follow this question (but adapted to Express 3.0): Nodejs: How to catch an exception from middleware? app.use(function(err, req, res, next) { console.error('Middleware exception:' + err.stack); …
RushPL
  • 4,732
  • 1
  • 34
  • 44
3
votes
1 answer

Web Workbench intellisense and LESS variables file

I use a separate file just for variables in less. I also have a bootstrapping less file which imports all the other less files at compile time. My question is, is there a way to tell Web Workbench to use the variables less file as a reference for…
Chris
  • 7,996
  • 11
  • 66
  • 98
3
votes
3 answers

Adding vendor prefixes with LESS mixin

I'm getting a Syntax Error for this mix-in: .vendors(@statement){ @statement; -moz-@statement; -webkit-@statement; } Any way to do this, or do mixin variables have to be on the right side of a :?
Artur Sapek
  • 2,425
  • 6
  • 27
  • 29
3
votes
2 answers

JavaScript Regex Pattern that contains parentheses

Using JavaScript I need to check a string for the first instance of a given pattern and return everything after, and including, the pattern. See example below for a typical string, pattern and desired result. The main problem I am having is that the…
runey71
  • 168
  • 1
  • 2
  • 12
3
votes
2 answers

Twitter Bootstrap: less compilation taking a long time

I'm writing a simple app using Twitter Bootstrap. In my main HTML file I have the following lines: so every time I refresh the…
machinery
  • 3,793
  • 4
  • 41
  • 52
1 2 3
99
100