After toying around with Visual Studio, I found the “snippets” functionality that works well in conjunction with LESS. It’s essentially a short hand for writing and reusing your media queries without having to re-write, or scrolling to the top of your code to copy and paste existing queries.
- This part is by no means essential, but is an approach I’ve adopted since incorporating LESS into client projects
- Breakpoint variables are created so that they can be reused and modified on one line, opposed to the multiple places that they are being used
- Create your core media queries
- Create a snippet per media query that includes the primary details
- Notice that the width value is “@BreakPointOne”. If you aren’t using LESS variables, this would be a pixel value
- Save this as a “.snippet” file
Add the Snippet to the gallery
- In Visual Studio select Tools > Code Snippets Manager
- Make a note of the path so that you can copy your custom snippets into the same folder
- Name appropriately
Use within your code
- When writing some CSS / LESS that will be in a media query, right click “Surround With” followed by your custom snippet
- You’ll now notice that your custom media query has been added and recognises the LESS variable value.