MEXEDGE

Consulting company that offers top-notch technical expertise in the Microsoft platform, and partners with its clients to deliver successful and innovative IT projects. The seasoned professionals at Mexedge constantly enrich and deepen their result-oriented culture through various collaborations with service companies and software publishers.
Visit Company Website

Mexedge Stylesheet Extension.

Overview

This Visual Studio extension allows you to visualize in a tree view form the structure of your css files right into your Solution Explorer, from media directive to classes, ids, types and declarations as well as pseudos. Like any other solution explorer extension, it also supports navigate to commands as well as a fast search. This lets you find in a matter of seconds class names, declarations and quickly navigate to its declaration. Another feature is to display a DGML diagram of any css, if your css files heavily leverage hierarchies you can easily get a clear picture of the imbrication. Wildcard search (*, ?) is also supported in order to provide a more flexible search experience.

From version 2, the extension now supports less language as well as many dedicated features: Import maps in DGML, Go to variable…

Important! This version requires Visual Studio 2013 Update 3

More details are presented on this post "Mexedge Stylesheet Extension now supports LESS"

Product Screenshots

Visual Studio Stylesheet Solution Explorer

Each and every css file is displayed as a tree within the Solution Explorer as long as it is not dependent upon a parent file.

Visual Studio Stylesheet Search Solution Explorer

You can search specific wild cards

Visual Studio Stylesheet Document Outline “like”

New Solution Explorer view centered on a particular css file (or media or selector) can bring back theCSS Document Outline missing in VS 2013.

Display Stylesheet as DGML diagram

A custom command is available on any CSS node that builds the corresponding DGML diagram. Users can navigate straight from the diagram to the corresponding declaration in the target css file with theGo To Definition command.

@import directive are also used to draw import maps in DGML format

Navigate accross less references

LESS variable references are displayed within the Solution Explorer tree and let users navigating to the declaration of the variable.

Features

Visual Studio CSS, LESS Solution Explorer

Visual Studio CSS, LESS Search Solution Explorer

Visual Studio CSS, LESS Document Outline "Like"

Display CSS, LESS (Import map...) as DGML diagram

What's next?

Sass support

Metric, Analyzers

Improve feature integration within Visual Studio and allow custom file exclusions, for instance *.min.*

Don't hesitate to give your opinion

User Voice site is available to collect feedback and/or suggestions.

Acknowledgments

Special thanks go to Mads Kristensen, for his valuable feedback and to Jean Marc Prieur, for his precious insight.