Added the ability to import yaml/json files into the toolkit/scss

gulpfile.js

@@ -9,6 +9,7 @@ var gulp = require('gulp');
 var gutil = require('gulp-util');
 var gulpif = require('gulp-if');
 var imagemin = require('gulp-imagemin');
+var importOnce = require('node-sass-import-once');
 var prefix = require('gulp-autoprefixer');
 var rename = require('gulp-rename');
 var reload = browserSync.reload;
@@ -64,7 +65,14 @@ gulp.task('styles:fabricator', function () {
 gulp.task('styles:toolkit', function () {
 	gulp.src(config.src.styles.toolkit)
 		.pipe(gulpif(config.dev, sourcemaps.init()))
-		.pipe(sass().on('error', sass.logError))
+		.pipe(sass({
+            importer: importOnce,
+            importOnce: {
+                index: true,
+                css: true,
+                bower: true
+            }
+           }).on('error', sass.logError))
 		.pipe(prefix('last 1 version'))
 		.pipe(gulpif(!config.dev, csso()))
 		.pipe(gulpif(config.dev, sourcemaps.write()))

package.json

@@ -46,6 +46,7 @@
     "gulp-sourcemaps": "^1.5.2",
     "gulp-util": "^3.0.6",
     "imports-loader": "^0.6.4",
+    "node-sass-import-once": "^1.2.0",
     "run-sequence": "^1.1.2",
     "script-loader": "^0.6.1",
     "webpack": "^1.12.1"

src/assets/toolkit/styles/functions/index.scss

@@ -0,0 +1,13 @@
+/* A simple deep-map-get function to load
+nested map values from the yaml or json data files */
+
+@function data($map, $keys...) {
+  $value: $map;
+  @each $key in $keys {
+    $value: map-get($value, $key);
+  }
+  $result: unquote(inspect($value));
+    //  Inspect is used here to silence a warning about depricating
+    //  none-string unquoting in future versions of sass  
+  @return $result;
+}

src/assets/toolkit/styles/toolkit.scss

@@ -2,7 +2,13 @@
  * Toolkit styles
  */
 
+@import "./functions";
+@import "../../../data/toolkit.yml";
 
 body {
 	font-family: sans-serif;
 }
+
+.f-menu a:hover {
+    color: data($toolkit, colors, primary, Dark) !important;
+}