less,web-essentials , LESS Compiler: Unexpected token u

LESS Compiler: Unexpected token u


Tag: less,web-essentials

When I attempt to compile a LESS template in Visual Studio using Web Essentials, I receive an error that says "Unexpected token u" with no file name, no line number, and no column number. Why is this happening?


Go to %USERPROFILE%\AppData\Local\Microsoft\VisualStudio\12.0\Extensions which is the folder where per-user Visual Studio extensions reside. WebEssentials will be located in a subfolder with a randomly generated name.

From inside the WebEssentials folder, open up the file Resources\nodejs\tools\server\services\srv-less.js and go to line 65, which reads:

map = JSON.parse(output.map);

The problem is source map output may be the undefined value. JSON.parse can only parse strings, so it casts that to the string value "undefined" before parsing, but JSON does not recognize that as valid token. (It only understands the null value, not the undefined value.)

So... change line 65 to read:

map = JSON.parse(output.map || "null");

And voilà; LESS compilation on files with empty output works again.

Source: https://github.com/madskristensen/WebEssentials2013/issues/1696


LessJs file not being processed in ASP.NET

I'm experiencing a peculiar issue and I'm having trouble diagnosing it. I am using LessJs in an ASP.NET MVC web application and the less file is not being processed and I am seeing my variables in the "F12" debug tools -- and the style is not applied as expected as...

“Additive” property values with LESS mixin

I'm looking for a feature that may or may not be available in LESS. I have a mixin that adds a "glow" with box-shadow, which I use on various elements - buttons, inputs etc. .glow() { box-shadow: 0 0 5px skyBlue; } What I'm looking for is a way to...

FontAwesome - Failed to decode downloaded font

I found allready this: http://stackoverflow.com/search?q=Failed+to+decode+downloaded+font But the Answers dont help to fix my problem =/ I got on my page this errors in console: Failed to decode downloaded font: http://devcomlink.kunena.dev-monkeys.com/components/com_kunena/template/devcomlink/fonts/font-awesome/fontawesome-webfont.woff2 index.php?option=com_kunena&view=category&layout=list&Itemid=129&templateStyle=9:1 Failed to decode downloaded font:...

LESS selector for element and child?

With LESS how can I apply styles to both a selector and the selector within it? My demo I need to apply opacity and z-index to the class a, and to label that come directly after it. .a { color: red; opacity: 0.9; z-index: 2; & + label { color:...

How to update variables with input values in .less file dynamically using AngularJS

I realize a form of this question has been asked before (see 28208451), however, I need to get the input value and then set it as the new value so that other input fields can access it. Here is a link to my plunk. I can enter a new hue...

Using guards in the mixin

I want to create a clever mixin for Bootstrap sources (mixin->buttons.less). What I have is as follows: Less: .button-variant(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; /* this variables must be used when I have parent's class="invert"*/ color: @background; background: @color; border-color: @background; /* end */ /*when not...

Will performance improve/decrease if I directly refer LESS in html?

I'm using LESS CSS and Dot Less in my ASP.NET MVC project. I'm directly referring LESS using bundles bundles.Add(new LessBundle("~/styles/templates").Include("~/Content/Stylesheets/Templates.less")); But this link saying if we use less.js in the html it will degrade the user performance. But i'm not using less.js in my project. I've the following questions. Shall...

Less CSS Extend and media queries

I have a few Less utilities that I've used as extends - here's a typical scenario. .clearfix { &:before, &:after { content:""; display:table; } &:after { clear:both; } } However, I now find myself using media queries and the extend doesn't, well, extend, to all these scenarios. What I would...

Less beautifier - format code

Is there is code beautifier for less such as http://www.lonniebest.com/formatcss/ for css? I need sort properties in less code by alphabet.

Can I set a style conditional on window size?

I've set a style for an iframe that is a youtube video: iframe { width: 450px !important; height: 253px !important; } But if the window is resized to small size, then the left margin disappears and there is room for the original size of the iframe. Is it possible to...

Using rulesets in LESS for media queries

When using Sass I would do something global like this (which I got from CSS-tricks btw) // Variables for MQ's $mq-mobile-portrait : 320px !default; $mq-mobile-landscape : 480px !default; $mq-tablet-portrait : 768px !default; $mq-tablet-landscape : 1024px !default; $mq-desktop : 1382px !default; Then I would create mixins for the media queries like...

Compile less file to css in expressjs 4.x

I want to compile the less file in public folder of expressjs application. Dependencies which I am using are "devDependencies": { "ejs": "^2.3.1", "express": "^4.10.6", "mysql": "^2.5.4" }, "dependencies": { "less": "^2.5.1", "less-middleware": "^2.0.1" } Content in styles.less file header { background-image: url('../img/bg.png'); height: 380px; input#searchBox { width: 100%; height:...

With Grunt, how can I compile all *.less files, if I have global mixins and constants?

I want to organize my HTML, JS, and LESS by module. I'm already using Grunt to compile *.js and *.html from my source folders. So I configured grunt as follows: grunt.initConfig({ less: { ALL: { files: { 'compiled.css': '**/*.less' } } } } But this runs into a major problem:...

Restrict mixin values and throw exception when invalid value is provided

I have the following Less mixin: .box-sizing(@value) { -webkit-box-sizing: @value; -moz-box-sizing: @value; box-sizing: @value; } and I would like to allow only the values 'border-box' and 'content-box' as parameter, otherwise the Less engine should throw an exception. How can I achieve this? Because without this validation I can write any...

Change Bootstrap gutter

I'm using Bootstrap v3.3.4, and I'm quite new at it. Is there any easy way to change Bootstrap gutter without recompiling it from its less files or using the website editor or any-other way that has something to do with modifying bootstrap.css? What I'm trying to do is to get...

Bootstraps responsive-utilities.less as single Less file?

I want to use the visible / hide system from bootstrap without including the full framework... I try to include just the responsive-utilities.less but then i get errors from lessphp... Anyone know maybe a site where i can get this visible system seperate as stand alone less file?...

Bootstrap, less, how to change number of @grid-columns for nested rows?

I'm building a bootstrap 3 layout and I'm trying to change the number of columns for the nested row so that the nested columns have the same width as top-level columns. I tried something like this but to no avail. <main id="container" class="section"> <div class="main-body"> <div class="sidebar"> <p>content</p> </div> <div...

Ignore certain Gulp-less errors, or prevent it from attempting to call @imports with css keyword

So I am using gulp as a task engine to handle less compilation (among other things), and part of our stylesheets include fonts from fonts.com. Here's the relevant task in our gulpfile: var gulp = require('gulp'), plugins = require('gulp-load-plugins')({ camelize: true }); browserSync = require('browser-sync'); reload = browserSync.reload; gulp.task('styles', function()...

LESS variable self concatenation

This .a { @a: 1; @b: 2; @concat: @a; @concat: ~"@{concat}@{b}"; margin: @concat; } gives an error. Syntax error: too much recursion However, this .a { @a: 1; @b: 2; @concat: e(`(function (a, b) { var concat = "" + a; concat += b; return concat; })(@{a}, @{b})`); margin: @concat;...

How do I dynamically change less variables in Meteor?

I have the Less package loaded in my Meteor application and it is working fine. Now I need to allow the users of my app. to override my less variables. I have looked at : less.modifyVars({ '@canvas': '#5B83AD' }); but my app. is saying that 'less is not defined'. Can...

Less - How to replace integer with a string?

I have a LESS variable: @columns: 12; I create a dynamic class name out of it: [email protected]{columns} {} // returns .one-12 {} How do I replace the 12 with a string "twelfth" Pseudo Code [email protected]{replace(columns, "twelfth")} {} The result will be .one-twelfth {} Advice will be appreciated! ...

How to throw an error in the LESS compiler

Question Is there any way to (programmatically) throw an error in the LESS compiler? Why? I have been fiddling around with mixin guards today, because I wanted to generate my CSS margin based upon element size and element count. I thought it would be cool to directly throw an error...

LESS CSS - &:focus not working in variable selector

I have the following code in my .less stylesheet. @text-inputs: input[type=text], input[type=password], input[type=email], input[type=number]; @shade: rgba(0, 0, 0, 0.1); .highlight { background: @shade; } .input-highlight { @{text-inputs} { .highlight; } } .input-highlight-subtle { @{text-inputs} { &:focus { .highlight; } } } My HTML: <body class="input-highlight-subtle"> <input type="text" placeholder="Type Here" />...

Brackets: Custom Theme

I am trying to make a custom Brackets Theme. After I created a basic package.json file I went into extension manager to apply the theme so when editing the 'theme.less' file it would apply the fixes right away. Well my theme does not show up and I do have a...

Font-awesome: how does it use class names to affect its content? [closed]

I'm trying to build a program that can utilize a classname for its data (i.e. if class="hero-banner-80" I could use the 80 as its width) and I was wondering how font-awesome does it? It uses its class-name to decide which char to place inside its element, and reading the src...

PhpStorm LESS Watcher configuration

I am using PhpStorm 8 to work on some LESS files. variables.less gets imported from styles.less. When I save variables.less only a variables.css is being made. How do I configure the watcher to transpile only styles.less > styles.css and automatically upload styles.css? Here's my current config: ...

Specify an attribute value using the parent selector in LESS/SCSS?

Is is possible to use the parent selector in LESS/SCSS to specify a value for a parent attribute selector? I want the following output: [some-attribute] { font-weight: normal; } [some-attribute~="bold"] { font-weight: bold; } Given this (obviously incorrect) example: [some-attribute] { font-weight: normal; &~="bold" { font-weight: bold; } } Is...

How to modify your CSS working with Mobile Angular UI and Bootstrap

I know that my question has already a huge number of topics, but I think it could be helpful for the community to have a clear answer in one topic. This is about modifying your CSS while using Mobile Angular UI, with a bootstrap template. This is how a project...

On hover color not changing using LESS css

I'm trying to change the color of text as well as background image, when hovered on the image. I'm using LESS and i am able to change the background image, but the color of the text is not getting changed. Please help. Here's my code snippet :- Jade code (...

Defining a:focus selector

I have the below HTML structure. <html> <a class="customcssstyle" href="#'>Link</a> </html> Now I need to have a style, such that on focus on the link , it should appear in red. For that in normal CSS, we write it as: a.customcssstyle:focus { color:red; } May I know how we can...

Using JavaScript to change Less files

I want to change a property of a Less file with JavaScript. This is my code document.getElementsByClassName('content-main--inner').style.border = '1px solid yellow!important'; I've tried it with !important and without it. But that doesn't work, the property doesn't change. I think the problem is here: ('content-main--inner') Is it possible to manipulate Less...

Inject css content from absolute external url using LESS

I need to include css from external recourse into my result css. I use LESS preprocessor. Is there the way to do this? For example, .wrapper { @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css'; } But that's not working for me. I get the same css: .wrapper { @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css'; } I want it to...

How can I use LESS in jsfiddle?

I'm new with jsfiddle, and I trying to use LESS but I did not see it in the language options, how can I make it work with LESS. I try to link less.min.js in external resources but neither worked Please help me. EDIT1: I'm proving some features of less and...

Redirect content to a file in ascii encoding

We're running lessc from the PowerShell like this: lessc -x style.less > style.min.css Unfortunately, style.min.css file is in unicode whereas we would like it to be in ascii. How can we force that encoding when writing the result to a file from PowerShell? Interestingly, when we run the same command...

Object doesn't support this action - all of a sudden

I'm running version 1.7.5 and for some incomprehensible reason, all of a sudden I'm getting syntax errors (none of my stylesheets have changed since it was working) and I'm including the .js file in the same way): Object doesn't support this action I've traced the error to this curious fragment...

Compile Less with Node, with dynamic variables

I'm building a SaaS project in NodeJS and I need to build CSS on the fly using LESS. I want to be able to change some of the less variables each time I build the css. The variables come from the database and can be different for each user (thus...

Ant exec command argument dealing with multiple files

I am using ant exec command to implement the less utility to view the source code of a bunch of .java files. (I know that there are other ways to do this like using concat) So the call ant view works if I specify only one file: <target name="view"> <exec...

Uninstall web essentials

I have downloaded a .vslx file and installed which cuases web essentials to be part of VS 2012. This may be a silly question. But How can I remove the webessentials from vs.I cannot find such an option in VS 2012. I found it total messy...

(AngularJS) Only one less file for entire Website

I am a beginner with AngularJS and I have a little problem, I installed grunt-contrib-less to support less files instead css but now I have to declare all less styles that will be compiled into only one css file. But my problem is normally when I'm using less, I write...

How to pass a LESS variable into a class name

I have a LESS variable: @columns: 12 I would like to pass this variable into a CSS class name ideally as: .one-{@columns}-inner {} Is it possible?...

node.js less removes background property when there are two using variables

I have a problem with less: @frames_color: #faeacd; @menu_color_hex: #faeacd; @menu_color_rgba: rgba(250, 234 ,205 , 255); with less: .topmenu { a { background-color: @menu_color_hex; background-color: @menu_color_rgba; } } results in css: #user_field .topmenu a { background-color: #faeacd; } AND .topmenu { a { background-color: green; background-color: @menu_color_hex; background-color: red; background-color:...

Laravel 5, Bootstrap, and Less

I'm just getting started with Laravel 5, and I followed this guide to install Bootstrap. It's my first time with Laravel, and I'm not familiar with responsive theming and related technologies. I then went to Startbootstrap to try out one of the templates in the Laravel framework. I created a...

CSS / Less / Sass - Match every previous siblings when :hover

In this code: <div id="Container"> <span class='first'>First</span> <span class='second'>Second</span> <span class='third'>Third</span> </div> I want to change color, when :hover. IF (.first:hover) THEN .first { color: red; } IF (.second:hover) THEN .first, .second { color: red; } IF (.third:hover) THEN .first, .second, .third { color: red; } Is this possible without...

searching through text file in terminal

Hi this might be a basic question for many, but it has however managed to eat a couple of hours of my time. I have large data file as an output from running a script. The file contains around 15 columns and around 100,000 rows. I wish to search through...

less.modifyVars not working in Asp.Net MVC

I have read this tutorial for working with Less in Asp.Net MVC5. To integrate LESS in ASP.NET MVC, I download and install the dotless NuGet package. And then added this bundle: var lessBundle = new Bundle("~/Less").Include("~/Content/Less/*.less"); lessBundle.Transforms.Add(new LessTransform()); lessBundle.Transforms.Add(new CssMinify()); bundles.Add(lessBundle); Here is the LessTransform: public class LessTransform : IBundleTransform...

Rails less url path change

Developing a Rails application with the less-rails gem I found something unusual : // app/assets/common/css/desktop/typo.less @font-face{ font-family:'SomeFont'; src:url("fonts/db92e416-da16-4ae2-a4c9-378dc24b7952.eot?#iefix"); // ... } The requested font is app/assets/common/css/fonts/db92e416-da16-4ae2-a4c9-378dc24b7952.eot This font is compiled with less and the results is : @font-face { font-family: 'SomeFont'; src: url("desktop/fonts/db92e416-da16-4ae2-a4c9-378dc24b7952.eot?#iefix"); //... } Do you know why is...

ASP.NET MVC how to change less variables with javascript?

In my application I must add feature for the user to chnage UI colors. For this purpose I have created .less file and set some global variables to their default value. What is the best practice for creating theme in Asp.net MVC?...

Horizontal line with fade out effect

I'm trying to replace bootstrap <hr /> with a gradient looking line like this one. So far I've tried used this mixin: .horizontal-gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(left, @startColor, @endColor); background-image: -moz-linear-gradient(left, @startColor, @endColor); background-image: -ms-linear-gradient(left, @startColor, @endColor);...

lesscss - which is the best way

article { // some css code //... // end css code h1 { transition: all 0.3s; } } body.active { article { h1 { transform: translate(0, 10px); } } } I try to write better body { article { // some css code //... // end css code h1 {...

How to set div to percentage of viewport?

I have to set a <div class="row" ng-repeat="..">..</div> to a percentage of the viewport minus a set amount of pixels (wich propabally won't be a problem because of jQuery or LESS). The big problem is the ng-repeat. Is there a way in either jQuery, Angular or LESS to do this?...