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:

 

TypeScript

 

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

 

CSSNext

 

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 = [

postcssImport,

postcssNext

];


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

.pipe(postcss(plugins))

.pipe(rename({

extname: “.css”

}))

.pipe(gulp.dest(‘./Content’));

});

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
“./variables.cssnext”;

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:


 

 


Leave a Reply

Your email address will not be published. Required fields are marked *