Teaching Visual Studio IntelliSense a little LESS

Working on a larger project where CSS and LESS code are split into many files, IntelliSense can be a great help. For a particular project, both the desktop and mobile site are in the same solution and shared some LESS variables and mixins.
Remembering what variables where available in ether desktop or mobile made me crazy. Some where used in both projects and some only in one of them. Here is how I got Visual Studio 2013 to help me.

The LESS files for the mobile project, where a subfolder of the desktop.
Adding a references.less file to both the desktop and mobile folder and only referencing the files needed for each project helped.


Desktop references.less:

/// <reference path="layout.less" />
/// <reference path="mixins.less" />
/// <reference path="tablet.less" />
/// <reference path="tiles.less" />
/// <reference path="typography.less" />

Mobile references.less

/// <reference path="variables.less" />
/// <reference path="mixins.less" /> //Only used for the mobile site
/// <reference path="../mixins.less" /> //shared for both desktop and mobile

Each of my LESS files then has a reference to the references.less file.

/// <reference path="references.less" />

When you then need to reuse a variable in your project. Just start type some of its name and press CTRL + Space. Visual Studio IntelliSense will show a list of variables that contains what you have typed. This approach can be used for mixins and selectors too.
Adding new files to the solution, required you to add the file to your references.less file and reload your solution. Using * as a wildcard does not work.
I have not been able to get VS IntelliSense to show comments or documentation for my variables, but at least it shows the value of variables. Suggestions on how to get this to work would be nice.

Happy styling!

1 kommentar »

  1. Now, there are different factors involved in this process, which determines the friendliness of a website. Before hiring an SEO agency make sure they’ll send you monthly reports of what they’ve done and the difference it’s made to your rankings for the agreed search terms. You might have tried some of these but not been able to find what you were looking or found that the returns they found were not relevant to the subject for which you were searching.

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s