LESS: Input not recognized

Trying to understand and master Web Essentials 2012, I encountered an issue with my LESS code.

Initially, this code snippet:

@main-color: red;

.mega-warning {
    font-size: 24px;
    color: @main-color;
}

resulted in a compile error "LESS: Unrecognised input" causing the compilation process to halt. However, when I moved the variable declaration @main-color inside the .mega-warning class scope, everything worked smoothly:

.mega-warning {
    @main-color: red;
    font-size: 24px;
    color: @main-color;
}

Can anyone help me figure out what I might be missing here?

asp.netcssvisual-studio-2012lessweb-essentials

Answer №1

Dealing with the same issue can be a challenge. It seems like Web Essentials 2012 v2.9 is experiencing some issues with *.less files that begin with variable declarations. To work around this, I have come up with the following solution:

html{}

@main-color: blue;

.mega-alert {
    font-size: 20px;
    color: @main-color;
}

Interestingly, everything functions perfectly fine when using the standalone lessc 1.4.2 compiler (included in WE2012 2.9 as mentioned in the changelog). I have reached out to the developer of Web Essentials extensions and shared a link to this query, so hopefully, a resolution will be provided soon.

Answer №2

Reduce the number of files saved using "UTF-8 without BOM" encoding to optimize your workflow. This strategy was suggested in a discussion on resolving Less compile errors in VS 2012 Web Essentials

Answer №3

In my experience with VS and Web Essentials 2013, I encountered a similar issue. The solution that worked for me was to create a new .less file from scratch using a template instead of simply changing the file extension from .css to .less. It seems that the straightforward approach doesn't always yield the desired results. Therefore, I recommend utilizing the Visual Studio template specifically designed for .less files.

I'm not entirely certain where the .less template originated from; it could have been included with Web Essentials or perhaps it was part of the SideWaffle template pack.

Answer №4

If you want to use a reference to a less file, make sure to include the following line:

rel="stylesheet/less"

Your reference should now appear as follows:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

To implement this, download the less.js file and insert a <script> tag in the <head> section of your HTML document. Remember to place the css <link> before the <script>.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for positioning two elements side by side in an li element without needing to clear each time

I'm struggling with a stacked list that involves floating an image (icon) alongside text. The constant need to clear after each list item is becoming cumbersome. Anyone have any suggestions for making this more streamlined and tidy? <ul> < ...

htmlcsscss-floathtml-lists

One helpful tip for adjusting the size of a UI chip on the fly

I am attempting to adjust the size of a UI chip dynamically based on the font size of its parent elements using the em unit in CSS. My objective is to achieve something like this: style={{size:'1em'}} The issue I'm encountering: The chip e ...

javascripthtmlcssreactjsmaterial-ui

Tips for testing the website's color modifications?

I recently had the task of replacing 10 specific colors with new ones in my CSS files. I used the find and replace method to make the changes in over 300 places throughout all the files. Now, I need a way to test if all the color replacements were done c ...

javascripthtmlcsstestingcolors

ASP.NET SiteMap control causes invalid XHTML -title includes & symbol

I have been utilizing the .SiteMap file and Sitemap control to generate a sitemap on my webpage. The title of the page in the Web.sitemap is "Out & About". However, when the page loads, the ampersand appears as & (Out & About) in the source code, ...

asp.netvalidationxhtmlsitemapweb-controls

What methods can be employed to efficiently monitor for updates on a website?

How can I efficiently check for updates on a webserver without reloading the entire page? I am inspired by the design of Facebook's startpage and StackOverflow's question viewing. My goal is to load new data seamlessly without disrupting the use ...

asp.netajax

Interactive Component overlying Layer - HTML/CSS

Currently, I am working on a web application that features a navigation bar at the bottom of the screen. To enhance visibility, I decided to apply a linear gradient overlay above the underlying elements. This screenshot illustrates what I mean. However, I ...

javascripthtmlcssvue.js

Automatically Fill Dropdown List with Ajax

Two dropdown lists are pre-populated on page load, but I need to rebind them after triggering an AJAX function. I have created a SQL Server stored procedure to retrieve the necessary data for these dropdown lists. How can I update the dropdown list value ...

c#asp.netajax

Trouble with Clicking to Show Content

<div id="uniqueDiv"> <button id="uniqueButton1" class="uniqueClass">Hit</button> <button id="uniqueButton2" class="uniqueClass">Run</button> </div> <div id="uniqueDiv2"> <p id="uniqueId1"></p>< ...

javascriptcss

Ensure that the headers of the table are in perfect alignment with the

Is there a way to create a table with fixed row headers so that column headings stay in place while scrolling? I've managed to achieve this, but now the table headers are not aligned properly with the rows below. I've also created a helpful jsfid ...

htmlcss

Display a close button for every individual item and use JavaScript to conceal the current item

I have a list that contains input fields along with delete link elements. I want to display the delete link element when the user hovers over the respective input field. Additionally, clicking on the close button (X) should hide the entire list item (li) f ...

javascripthtmlcsseventsdom

Creating a layout with a CSS div that has a height of 100

I've been utilizing this code to design the layout of my website. However, I've encountered an issue where the "left" and "right" divs are not displaying on the screen (they only show up when I set their height in pixels, not in percentages). Any ...

htmlcsslayout

Bootstrap badge is encountering loading issues

My index.html isn't displaying the badge correctly on any browser. The numbers aren't showing up in a colored circle, it looks like the CSS didn't load properly. I've tried using both local and CDN paths for bootstrap and jquery, but t ...

jqueryhtmlcssbootstrap-4

What is the best way to transfer a table with multiple rows in a single column to an Excel spreadsheet while maintaining the headers on a horizontal plane

Currently, I am in the process of gathering data. The data is being sent to me in a word format and organized in a vertical columned table with different headers and alternating data. I am looking for a way to export this data from Word into an Excel spre ...

htmlcssexcelvbams-word

Why won't hover over function properly in separate divs for two items?

My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...

javascriptcssnext.jshoverjsx

Obtaining data from an external ng-repeat element

My list contains items that are being repeated using ng-repeat details. I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding d ...

javascriptjqueryhtmlcssangularjs

Adjust all children's height to match that of the tallest child

My nearly completed jQuery slideshow is working well except for one issue - the height of the slideshow remains fixed at the height of the first displayed slide, causing problems. View the issue here: . I have tried different jQuery solutions from StackOve ...

jqueryhtmlcss

What is the proper location to define the consumerKey and consumerSecret for Twitter authentication in MVC 6?

Each time a new version of the .NET Framework is released, the authentication framework for external logins undergoes significant changes! Unfortunately, the external login documentation link for MVC 6 seems to be missing. You can try searching for it on ...

asp.netasp.net-coreasp.net-core-mvcasp.net-identity-2

Question regarding the exclusive use of [WebMethod] AJAX functions for request processing

In the process of revamping an Ecommerce website, I am focusing on simplifying the checkout process by condensing it to a single page using ASP.NET/C#. (The current website does not utilize any ASP controls) To provide some background, customers will have ...

c#asp.netajaxwebmethod

Stop animation on mobile devices by modifying the CSS file

Using jQuery, I added an animation class to a div on my webpage. The animation.css file has been included as well. The class animated slideInLeft is currently in use. My question is whether it is possible to disable this class for mobile devices in order ...

jqueryhtmlcss

Unique style for custom vue multiselect component

I have implemented a Vue Multiselect component, but I am struggling to fully customize it with CSS styles. I have applied some CSS styles, but I am unable to achieve all the customization I want. Specifically, I want to modify the option height, select box ...

htmlcssvue.jsvue-componentmulti-select