diff --git a/demos/app.core.scss b/demos/app.core.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/demos/app.ios.scss b/demos/app.ios.scss
new file mode 100644
index 0000000000..e4cd894dd5
--- /dev/null
+++ b/demos/app.ios.scss
@@ -0,0 +1 @@
+@import "../ionic/ionic.ios";
diff --git a/demos/app.md.scss b/demos/app.md.scss
new file mode 100644
index 0000000000..81059855da
--- /dev/null
+++ b/demos/app.md.scss
@@ -0,0 +1 @@
+@import "../ionic/ionic.md";
diff --git a/demos/app.variables.local.scss b/demos/app.variables.local.scss
new file mode 100644
index 0000000000..bc97dada4d
--- /dev/null
+++ b/demos/app.variables.local.scss
@@ -0,0 +1,2 @@
+$font-path: "/fonts";
+$roboto-font-path: "/fonts";
diff --git a/demos/app.variables.production.scss b/demos/app.variables.production.scss
new file mode 100644
index 0000000000..bc97dada4d
--- /dev/null
+++ b/demos/app.variables.production.scss
@@ -0,0 +1,2 @@
+$font-path: "/fonts";
+$roboto-font-path: "/fonts";
diff --git a/demos/output.ios.scss b/demos/output.ios.scss
new file mode 100644
index 0000000000..1dd0c0ebb3
--- /dev/null
+++ b/demos/output.ios.scss
@@ -0,0 +1,5 @@
+$font-path: "/fonts";
+$roboto-font-path: "/fonts";
+
+
+@import "../ionic/ionic.ios";
diff --git a/demos/output.md.scss b/demos/output.md.scss
new file mode 100644
index 0000000000..d9a0a3c124
--- /dev/null
+++ b/demos/output.md.scss
@@ -0,0 +1,5 @@
+$font-path: "/fonts";
+$roboto-font-path: "/fonts";
+
+
+@import "../ionic/ionic.md";
diff --git a/gulpfile.js b/gulpfile.js
index 32974f98df..97daae2292 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -566,7 +566,14 @@ gulp.task('build.demos', function() {
   var VinylFile = require('vinyl');
 
   var baseIndexTemplate = _.template(fs.readFileSync('scripts/demos/index.template.html'))();
+  var flags = minimist(process.argv.slice(2), flagConfig);
 
+  if ("production" in flags) {
+    buildDemoSass(true);
+  } else {
+    buildDemoSass(false);
+  }
+  
   var tsResult = gulp.src(['demos/**/*.ts'])
     .pipe(cache('demos.ts'))
     .pipe(tsc(getTscOptions(), undefined, tscReporter))
@@ -606,6 +613,47 @@ gulp.task('build.demos', function() {
   }
 });
 
+function buildDemoSass(isProductionMode) {
+  var sass = require('gulp-sass');
+  var autoprefixer = require('gulp-autoprefixer');
+  var minifyCss = require('gulp-minify-css');
+  var concat = require('gulp-concat');
+
+  var sassVars = isProductionMode ? 'demos/app.variables.production.scss': 'demos/app.variables.local.scss';
+
+  (function combineSass() {
+    gulp.src([
+        sassVars,
+        'demos/app.ios.scss'
+      ])
+    .pipe(concat('output.ios.scss'))
+    .pipe(gulp.dest('demos/'))
+
+    gulp.src([
+        sassVars,
+        'demos/app.md.scss'
+      ])
+    .pipe(concat('output.md.scss'))
+    .pipe(gulp.dest('demos/'))
+
+  })();
+
+  gulp.src([
+    'demos/output.ios.scss',
+    'demos/output.md.scss'
+  ])
+
+  .pipe(sass({
+      includePaths: [__dirname + '/node_modules/ionicons/dist/scss/'],
+    }).on('error', sass.logError)
+  )
+  .pipe(autoprefixer(buildConfig.autoprefixer))
+  .pipe(gulp.dest('dist/demos/'))
+  .pipe(minifyCss())
+  .pipe(rename({ extname: '.min.css' }))
+  .pipe(gulp.dest('dist/bundles/'));
+}
+
 
 /**
  * Tests
diff --git a/scripts/demos/index.template.html b/scripts/demos/index.template.html
index 2d470cb5ee..30cbe6b066 100644
--- a/scripts/demos/index.template.html
+++ b/scripts/demos/index.template.html
@@ -6,9 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
   <link rel="stylesheet" type="text/css" href="/dist/demos/scrollbar-fix.css">
-  <link ios-href="/dist/bundles/ionic.ios.css" rel="stylesheet">
-  <link md-href="/dist/bundles/ionic.md.css" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="app.css">
+  <link ios-href="../output.ios.css" rel="stylesheet">
+  <link md-href="../output.md.css" rel="stylesheet">
   <script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script>
 
 </head>