less

I've set up Web Essentials 2013 (in Visual Studio 2012) and loaded in the default Twitter Bootstrap LESS source files. Auto-build and minification is working perfectly, except Web Essentials quite overdoes the job. When I select " bootstrap.less ", make a change and save it, Web Essentials creates a new " bootstrap.css " as well as a " bootstrap.min.css " with everything inside I need. But when I edit e.g. buttons.less , it creates a buttons.css (and buttons.min.css ) too (with all the includes and mixins). Which means, in fact, I'll have nearly the same css files over and over again under

I've just upgraded my application to the latest release of rails (3.1) and I'm wanting to integrate Twitter's Bootstrap into my application but it uses LESS and not SASS which is what Rails 3.1 uses by default. How do I go about configuring Rails to use Less instead of Sass? As apneadiving points out, Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS. To configure your Rails app to support LESS, you can add the gem to the assets group of your Gemfile: group :assets do gem 'less' end Then, run bundle install to get the less gem and its dependencies (which includes the libv8

I would like to create a function which does the following: .sprite-size (@width,@height,@x,@y) { width:~'@{width}px'; height:~'@{height}px'; background: @sprites no-repeat -~'@{x}px' -~'@{y}px'; } I would like to pass a postive value, in @x and @y and then negate them in the output. The above LESS function outputs the following for the following example: //LESS .header-language-selection { .sprite-size(44,21,312,0); } //Outputs CSS .header-language-selection { width: 44px; height: 21px; background: url('/Content/images/sprites.png') no-repeat - 312px - 0px; } As you can see the output result

I have the following mixin for cross-browser transform: .transform (...) { -webkit-transform: @arguments; /* Chrome, Opera 15+, Safari 3.1+ */ -moz-transform: @arguments; /* Firefox 3.5+ */ -ms-transform: @arguments; /* IE 9 */ -o-transform: @arguments; /* Opera 10.5+ */ transform: @arguments; /* Firefox 16+, IE 10+, Opera */ } .translate(@x:0, @y:0) { .transform(translate(@x, @y)); } And apply it something like the following: #main { .translate(280px, 0); } But it's not wotk in IE8 and Opera mini . Is there some fallback, polyfill or any for supporting it in therese browsers? There are a few

What is the equivalent of Scss' emCalc() in less? padding: emCalc(24px); in Scss will calculate em based on the viewpoint and zoom level. Is there any built-in function in less? You could do this to convert px to em. @font-size: 16; // Your base font-size in pixels @em: @font-size*1em; // Shorthand for outputting ems, e.g. "12/@em" @rem: @font-size*1rem; // Shorthand for outputting ems, e.g. "12/@rem" h1{ font-size: 20/@em; } Iggy van Lith With LESS you can build your own functions. I use this function with the grunt-contrib-less package. The formatting is slightly different from the usual

I'm using LESS CSS 1.3.3. Sorry if this question has already been asked, I didn't find anything relevant on the web. I have several class generators that look like this (example extremely simplified, just enough to trigger the error): #genMarginTop (@name, @size) { .@{name} { margin-top: @size; } } Then I use them to generate some actual classes: #genMarginTop(mtStandard, 40px); #genMarginTop(mtHalf, 20px); So far, so good, LESS correctly generates those classes and I can use them in the HTML. However when I want to reuse such a generated class as a mixin somewhere else, I get an error:

How can I force assetic to render assets each time the page is reloaded (no matter if assets are modified or not)? More explanation about my issue: I'm currently working on a Symfony2 project where I use Assetic to manage and compile .less files. I got everything to work fine but I'm having a small issue that I'd like to fix. In config.yml, I set the assetic use_controller to true. # Assetic Configuration assetic: debug: %kernel.debug% use_controller: true The result is that Symfony dynamically renders the new .css files each time .less files are modified. This is great. My problem is that I

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? I had same problem, I use webpack with less loader, I needed to add javascript option in less loader config: { test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader", options: { javascriptEnabled: true } }] } I found in the sourcecode of less compiler: https://github.com/less/less.js/blob/3.x/bin/lessc that they parse js less option in this way: case 'js': options.javascriptEnabled =