adding new logic for include

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crispy-boilerplate",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
   "repository": {
     "type": "git",
@@ -25,13 +25,15 @@
   "config": {
     "dest_dir": "dest/",
     "src_dir": "src/",
-    "build_dir": "build/"
+    "build_dir": "build/",
+    "normalize": "node_modules/normalize.css",
+    "reflex_grid": "node_modules/reflex-grid/scss"
   },
   "scripts": {
     "build": "npm run css:build && npm run svg:build",
     "css:build": "npm run css:clean && npm run css:scss && npm run css:postcss && npm run css:minify",
     "css:clean": "rimraf $npm_package_config_dist_dir/css/*",
-    "css:scss": "node-sass $npm_package_config_src_dir/scss/example.scss $npm_package_config_dest_dir/css/styles.css",
+    "css:scss": "node-sass --include-path $npm_package_config_normalize --include-path $npm_package_config_reflex_grid $npm_package_config_src_dir/scss/example.scss $npm_package_config_dest_dir/css/styles.css",
     "css:postcss": "postcss $npm_package_config_dest_dir/css/*.css --use autoprefixer -d $npm_package_config_dest_dir/css/",
     "css:minify": "cleancss $npm_package_config_dest_dir/css/styles.css > $npm_package_config_dest_dir/css/styles.min.css",
     "svg:build": "npm run svg:clean && npm run svg:copy && npm run svg:optimize && npm run svg:minify",

src/scss/_base.scss

@@ -1,7 +1,3 @@
-@import
-    '../../node_modules/normalize.css/normalize',
-    '../../node_modules/reflex-grid/scss/reflex';
-
 /**
  * base
  *
@@ -10,132 +6,135 @@
  *
  */
 
-html {
-    font-size: 100%;
-}
-
-body,
-html {
-    height: 100%;
-}
-
-html,
-legend {
-    box-sizing: border-box;
-}
-
-*,
-*::after,
-*::before {
-    box-sizing: inherit;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-// paragraphs
-p {
-    margin: toEm(0 0 $crispy__margin 0);
-}
-
-// Semantic text elements
-a,
-ins,
-u {
-  text-decoration-skip: ink edges;
-}
-
-a {
-    color: $crispy__color-primary;
-
-    &:hover {
-        color: $crispy__color-text;
-    }
-
-    &:focus {
-        outline: none;
-    }
-}
-
-abbr[title] {
-    border-bottom: 1px dotted;
-    cursor: help;
-    text-decoration: none;
-}
-
-kbd {
-    // @TODO do something
-}
-
-mark {
-    padding: toEm(10px);
-
-}
-
-// blockquote
-blockquote {
-    border-left: 1px solid $crispy__color-secondary;
-    margin-left: 0;
-    padding: toEm(10px 20px);
-
-    p:last-child {
-        margin-bottom: 0;
-    }
-}
-
-// lists
-ul, ol, dl {
-    padding: 0;
-    margin: toEm(0 0 $crispy__margin $crispy__margin);
-}
-
-ul ul, ol ol {
-    margin-top: toEm(($crispy__margin / 2));
-}
-
-ol {
-    list-style: decimal inside;
-}
-
-ul {
-    list-style: disc inside;
-}
-
-dd, dt {
-    margin: 0;
-}
-
-dt {
-    font-weight: bold;
-}
-
-// media
-figure  {
-    margin: toEm(0 0 $crispy__margin);
-}
-
-figcaption {
-    margin: toEm($crispy__margin 0 0);
-}
-
-// divider
-hr {
-    border: 0;
-    border-top: 1px solid $crispy__color-secondary;
-    margin: toEm($crispy__margin 0)
-}
-
-// body
-body {
-    font-family: $crispy__body__font-family;
-    font-weight: normal;
-    
-    line-height: $crispy__body__line-height;
-    color: $crispy__body__color;
-    background-color: $crispy__body__background-color;
-    direction: $crispy__body__direction;
-
-    @include crispy__font-size($crispy__body__font-size);
+@mixin crispy__base() {
+	html {
+		font-size: 100%;
+	}
+
+	body,
+	html {
+		height: 100%;
+	}
+
+	html,
+	legend {
+		box-sizing: border-box;
+	}
+
+	*,
+	*::after,
+	*::before {
+		box-sizing: inherit;
+	}
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	// paragraphs
+	p {
+    	margin: toEm(0 0 $crispy__margin 0);
+	}
+
+	// Semantic text elements
+	a,
+	ins,
+	u {
+		text-decoration-skip: ink edges;
+	}
+
+	a {
+		color: $crispy__color-primary;
+
+		&:hover {
+			color: $crispy__color-text;
+		}
+
+		&:focus {
+			outline: none;
+		}
+	}
+
+	abbr[title] {
+		border-bottom: 1px dotted;
+		cursor: help;
+		text-decoration: none;
+	}
+
+	kbd {
+		// @TODO do something
+	}
+
+	mark {
+		padding: toEm(10px);
+	}
+
+	// blockquote
+	blockquote {
+		border-left: 1px solid $crispy__color-secondary;
+		margin-left: 0;
+		padding: toEm(10px 20px);
+
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	// lists
+	dl,
+	ol,
+	ul {
+		padding: 0;
+		margin: toEm(0 0 $crispy__margin $crispy__margin);
+	}
+
+	ol ol,
+	ul ul {
+		margin-top: toEm(($crispy__margin / 2));
+	}
+
+	ol {
+		list-style: decimal inside;
+	}
+
+	ul {
+		list-style: disc inside;
+	}
+
+	dd,
+	dt {
+		margin: 0;
+	}
+
+	dt {
+		font-weight: bold;
+	}
+
+	// media
+	figure {
+		margin: toEm(0 0 $crispy__margin);
+	}
+
+	figcaption {
+		margin: toEm($crispy__margin 0 0);
+	}
+
+	// divider
+	hr {
+		border: 0;
+		border-top: 1px solid $crispy__color-secondary;
+		margin: toEm($crispy__margin 0);
+	}
+
+	// body
+	body {
+		font-family: $crispy__body__font-family;
+		font-weight: normal;
+		line-height: $crispy__body__line-height;
+		color: $crispy__body__color;
+		background-color: $crispy__body__background-color;
+		direction: $crispy__body__direction;
+		@include crispy__font-size($crispy__body__font-size);
+	}
 }

src/scss/_crispy.scss

@@ -1,4 +1,6 @@
 @import
+    'normalize',
+    'reflex',
     'functions/functions',
     'mixins/mixins',