VCSS

With the changes coming in Visual Studio providing enhanced CSS support, we feel that VCSS is likely to be redundant within a short space of time - so please use the Visual Studio tools as they become available.

http://weblogs.asp.net/scottgu/archive/2011/12/02/new-css-editor-improvements-in-visual-studio-asp-net-4-5-series.aspx

What Is VCSS

VCSS adds variables, functions and nesting to your CSS files. With these three powerful programming features at your disposal, you can write style sheets that are easier to maintain and contain less repetition. As the VCSS compiler generates standard CSS, you can use it safely on any website.

Why VCSS

• Easy - VCSS is really easy to learn. It looks like CSS, with a couple of simple additions. You can be up and running with VCSS is just a couple of minutes.
• Maintainable You can declare the style rules that are likely to change at the top of your document and easily update the theme later without resorting to find and replace.
• Re-Usable You can use VCSS functions to simplify vendor-specific rules such as border-radius.
• Free Editor There is a free VCSS editor that you can download and use to write VCSS with syntax highlighting a preview of the CSS that will be generated.

VCSS Example

@@MainColour = Silver;
@@ComplimentaryColour = Blue;
@@DefaultRadius = 1em;
@@BorderRadius(@@radius) {
	-moz-border-radius: @@radius;
	-webkit-border-radius: @@radius;
	border-radius: @@radius;
}

a {
	color: @@MainColour
	border: 1px solid @@MainColour;
}


#main {
	width: 100%;
	@@BorderRadius(0.5em);

	a {
		color: @@ComplimentaryColour;
		border: 1px solid @@MainColour;
	}
	
	p {
		padding: 2em;
	}

	ul {
		padding: 0;
		
		li {
			list-style: none;

			a {
				display: block;
			}
		}
	}
}

#footer {
	width: 80%;
	@@BorderRadius(@@DefaultRadius);
}

CSS Generated By VCSS Editor

And results in this CSS:

a {
    color: Silver;
    border: 1px solid Silver;
}
#main {
    width: 100%;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}
#main a {
    color: Blue;
    border: 1px solid Silver;
}
#main p {
    padding: 2em;
}
#main ul {
    padding: 0;
}
#main ul li {
    list-style: none;
}
#main ul li a {
    display: block;
}
#footer {
    width: 80%;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

There is a free VCSS Editor available as a download, which includes the VCSS compiler...