Using Visual Studio Snippets with LESS variables for Media Queries

​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.

Breakpoint Variables

  • 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


Snippets

  • 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

Snippet

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

VS Snippet gallery.png

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

Surround With

Surround With - Select Snippet

  • You’ll now notice that your custom media query has been added and recognises the LESS variable value.

Final result

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s