Started work on a 'dynamic SASS' system.

app/index.js

 
 
-const sass = require('sass');
+const styles = require('../app/styles');
 
-console.log("Hello there")
+async function start(){
+  let style = null;
+  try {
+    style = await styles.render("main");
+  } catch (err) {
+    console.log(err);
+  }
+
+  if (style !== null){
+    console.log(style);
+    let e = document.createElement('style');
+    e.innerHTML = style.css.toString();
+
+    let head = document.getElementsByTagName('head');
+    if (head.length > 0)
+      head = head[0]; // There should really only be one head... we're not a hydra!!!
+    head.appendChild(e);
+  }
+}
+
+console.log("Kicking the pig!");
+start();
+
+/*
 sass.render({file: 'view/sass/main.scss'}, (err, res) => {
   if (err){
     console.log(err);
     head = head[0]; // There should really only be one head... we're not a hydra!!!
   head.appendChild(style);
 });
-
+*/
 

app/styles.js

+
+const sass = require('sass');
+
+// TODO: Once configs are setup, make this section more dynamic!!
+var VARS = {
+  COLOR_LIGHTER: "#fffcf2",
+  COLOR_LIGHT: "#ccc5b9",
+  COLOR_DARK: "#403d39",
+  COLOR_DARKER: "#252422",
+  COLOR_HIGHLIGHT: "#eb5e28",
+  UI_SCALE: 1.0
+};
+
+
+function buildSASSVars(){
+  let res = "";
+  Object.keys(VARS).forEach((key)=>{
+    res = res + "$" + key + ": " + VARS[key] + ";\n";
+  });
+  return res;
+}
+
+function render(entryfile){
+  return new Promise((res, rej) => {
+    let entry = buildSASSVars() + "@import '" + entryfile + "';\n";
+    sass.render({data: entry, includePaths:['view/sass/']}, (err, data) => {
+      if (err){rej(err);}
+      res(data);
+    });
+  });
+}
+
+
+module.exports = {
+  render
+};
+
+

view/sass/main.scss

 
-@import 'colors';
-
 body {
-  background-color: $COLOR_MAIN;
+  background-color: $COLOR_DARK;
+  color: $COLOR_LIGHT;
 }