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.
/// <reference path="layout.less" /> /// <reference path="mixins.less" /> /// <reference path="tablet.less" /> /// <reference path="tiles.less" /> /// <reference path="typography.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.