diff --git a/packages/learn/src/head/index.js b/packages/learn/src/head/index.js
index 51da3baab3..a851780487 100644
--- a/packages/learn/src/head/index.js
+++ b/packages/learn/src/head/index.js
@@ -2,9 +2,10 @@ import favicons from './favicons';
 import meta from './meta';
 import styleSheets from './styleSheets';
 import mathjax from './mathjax';
+import sassjs from './sassjs';
 
 const metaAndStyleSheets = meta
-  .concat(favicons, styleSheets, mathjax)
+  .concat(favicons, styleSheets, mathjax, sassjs)
   .map((element, i) => ({ ...element, key: `meta-stylesheet-${i}` }));
 
 export default metaAndStyleSheets;
diff --git a/packages/learn/src/head/sassjs.js b/packages/learn/src/head/sassjs.js
new file mode 100644
index 0000000000..9a338babff
--- /dev/null
+++ b/packages/learn/src/head/sassjs.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const cdnAddr =
+  'https://cdnjs.cloudflare.com/ajax/libs/sass.js/' +
+  '0.10.9/sass.sync.min.js';
+
+const sassjs = [<script key='sassjs' src={cdnAddr} type='text/javascript' />];
+
+export default sassjs;
diff --git a/packages/learn/src/templates/Challenges/rechallenge/transformers.js b/packages/learn/src/templates/Challenges/rechallenge/transformers.js
index c616835fb3..5c208bbc9b 100644
--- a/packages/learn/src/templates/Challenges/rechallenge/transformers.js
+++ b/packages/learn/src/templates/Challenges/rechallenge/transformers.js
@@ -35,29 +35,10 @@ const console$logReg = /(?:\b)console(\.log\S+)/g;
 const NBSPReg = new RegExp(String.fromCharCode(160), 'g');
 
 const isJS = matchesProperty('ext', 'js');
-const testHTMLJS = overSome(isJS, matchesProperty('ext', 'html'));
+const testHTML = matchesProperty('ext', 'html');
+const testHTMLJS = overSome(isJS, testHTML);
 export const testJS$JSX = overSome(isJS, matchesProperty('ext', 'jsx'));
 
-// work around the absence of multi-flile editing
-// this can be replaced with `matchesProperty('ext', 'sass')`
-// when the time comes
-const sassRE = /type='text\/sass'/i;
-const testSASS = file => sassRE.test(file.contents);
-// This can be done in the transformer when we have multi-file editing
-const browserSassCompiler = `
-  <script>
-    var styleTags = [ ...document.querySelectorAll('style') ];
-    [].slice.call(styleTags, 1).forEach(
-      function compileSass(tag) {
-        var scss = tag.innerHTML;
-        Sass.compile(scss, function(result) {
-          tag.type = 'text/css';
-          tag.innerHTML = result.text;
-        });
-      }
-    )
-  </script>
-`;
 // if shouldProxyConsole then we change instances of console log
 // to `window.__console.log`
 // this let's us tap into logging into the console.
@@ -107,12 +88,37 @@ export const babelTransformer = cond([
   [stubTrue, identity]
 ]);
 
-export const sassTransformer = cond([
-  [testSASS, partial(vinyl.appendToTail, browserSassCompiler)],
+const htmlSassTransformCode = file => {
+  let doc = document.implementation.createHTMLDocument();
+  doc.body.innerHTML = file.contents;
+  let styleTags = [].filter.call(
+      doc.querySelectorAll('style'),
+      style => style.type === 'text/sass'
+  );
+  if (styleTags.length === 0 || typeof Sass === 'undefined') {
+    return vinyl.transformContents(() => doc.body.innerHTML, file);
+  }
+  return styleTags.reduce((obs, style) => {
+    return obs.flatMap(file => new Promise(resolve => {
+      window.Sass.compile(style.innerHTML, function(result) {
+        style.type = 'text/css';
+        style.innerHTML = result.text;
+        resolve(vinyl.transformContents(() => doc.body.innerHTML, file));
+      });
+    }));
+  }, Observable.of(file));
+};
+
+export const htmlSassTransformer = cond([
+  [testHTML, htmlSassTransformCode],
   [stubTrue, identity]
 ]);
 
-export const _transformers = [replaceNBSP, babelTransformer, sassTransformer];
+export const _transformers = [
+  replaceNBSP,
+  babelTransformer,
+  htmlSassTransformer
+];
 
 export function applyTransformers(file, transformers = _transformers) {
   return transformers.reduce((obs, transformer) => {