Being forward compatible – Goodbye SASS hello CSSNext

Instead of being backwards compatible we want to be forward compatible.

But what do I mean with “forward compatible”?

Well that’s when we write our code against the next standard spec, but compile down to older specs to be backwards compatible, so for example:




We use TypeScript to write modern ES6, ES7, ES8 code, but we compile down to ES5 to be backwards compatible with older browsers.




The only reason we used SASS in the current project, was to re-use color variables in css.

Now the css next spec includes custom properties (variables), so to be forward compatible we decided to port our SASS to CSSNext.


CSSNext with PostCSS


PostCSS is a node package that can be installed by using NPM, it can be used to pre-process CSS by using JavaScript / TypeScript.

One of the many plugins of PostCSS is een CSSNext plugin, in the following example I will be using this plugin to convert CSSNext code into normal CSS3 code.

In this example I will be using Visual Studio 2015 update 3.



Create a new MVC web project


File > New > Project…
Installed > Templates > Visual C# > Web > ASP.NET Web Application (.NET Framework) > MVC


Add a package.json file to the root of the web application



“dependencies”: {
“angular”: “1.2.29”,

“es5-shim”: “>=4.5.9”,

“es6-shim”: “>=0.35.1”,

“spin.js”: “>=2.3.2”

“devDependencies”: {

“del”: “>=2.2.1”,

“gulp”: “>=3.9.1”,

“gulp-debug”: “>=2.1.2”,

“gulp-postcss”: “>=6.1.1”,

“gulp-rename”: “>=1.2.2”,

“gulp-util”: “>=3.0.7”,

“postcss-import”: “>=8.1.2”,

“postcss-cssnext”: “>=2.7.0”

“name”: “WebApplication1”,

“private”: true,

“scripts”: {

“gulp”: “gulp”

“version”: “1.0.1”



Add a gulpfile.js to the root of the web application



* The version of gulp and all it’s dependencies are managed in the package.json file.


‘use strict’;

// Dependencies

const gulp = require(‘gulp’);

const postcss = require(‘gulp-postcss’);

const postcssImport = require(‘postcss-import’);

const postcssNext = require(‘postcss-cssnext’);

const rename = require(‘gulp-rename’);

const defaultTheme = ‘Stigas’;


* The default task.


gulp.task(‘default’, function () {


gulp.task(‘apply-theming’, function () {

var plugins = [




return gulp.src(‘./Content/Site.cssnext’)



extname: “.css”




Add a “Content/variables.cssnext” file


:root {

–mainColor: rgb(255, 0, 0);



Rename the existing Site.css to Site.cssnext


At the following text at the top of the Site.cssnext file: @import

And at the following css rule at the end of this script:

p {

color: var(–mainColor);


Now run the gulp task “apply-theming” by using the Task Runner Explorer or on the command line: npm run gulp — apply-theming




Now when you run the web application you should see the text in red: