css-preprocessor

In my CSS I have to create classes that make reference to a 'hair colour' and 'hairstyle' I have written a mixin to help make my CSS writing more efficient: @mixin hair($hair, $colour) { .hair-#{$colour} .#{$hair} { background:image-url("xsppsfhair#{$hair}#{$colour}.svg") center top no-repeat, image-url("xsppsheadgrey.svg") center top no-repeat, image-url("xsppsbhair#{$hair}#{$colour}.svg") center top no-repeat; } } @include hair(spikyboy, blonde); @include hair(curlyafroboy, blonde); This produces the following CSS .hair-blonde .spikyboy { background: url('../images/xsppsfhairspikyboyblonde

How can I use the Sass CSS preprocessor in Visual Studio 2013 ? Are there any extensions that provide support for Sass? Visual Studio 2013 Update 2 Visual Studio 2013 Update 2 has native syntax support for both SCSS and LESS files. You can create SCSS or LESS files and see syntax highlighting and intellisense for these file types. It does not however provide a method of compilation. Here's a link to the blog explaining about the new features: We added LESS in VS2013 RTM, and we now have a SASS project item and editor. SASS editor features are comparable to LESS editor, include colorization,

I have: JS files that I want to bundle. LESS files that I want to compile down to CSS (resolving @imports into a single bundle). I was hoping to specify these as two separate inputs and have two separate outputs (likely via extract-text-webpack-plugin). Webpack has all the proper plugins/loaders to do compilation, but it doesn't seem to like the separation. I've seen examples of people requiring their LESS files directly from JS, such as require('./app.less'); , for no other reason than to tell webpack to include those files into the bundle. This allows you to only have a single entry point,