Implement Sass CSS template

Uses the CSS primitive value types to define custom properties.

References:
  - https://www.w3.org/TR/css-variables

src/sass/template-css.scss

@@ -0,0 +1,256 @@
+/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++
+title      Nord                                    +
+project    nord                                    +
+version                                            +
+repository https://github.com/arcticicestudio/nord +
+author     Arctic Ice Studio                       +
+email      [email protected]         +
+copyright  Copyright (C) 2016                      +
+++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+[References]
+W3C
+  (https://www.w3.org/TR/css-variables)
+  (https://www.w3.org/TR/selectors/#root-pseudo)
+CSS Working Group
+  (https://drafts.csswg.org/css-variables)
+MDN
+  (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)
+KSS
+  (http://warpspire.com/kss)
+kss-node
+  (https://github.com/kss-node/kss-node)
+*/
+
+@import "nord";
+
+/*
+A arctic, north-bluish color palette.
+Created for the clean- and minimal design pattern to achieve a optimal focus and readability for code syntax
+highlighting and UI.
+It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
+ambiance.
+
+Styleguide Nord
+*/
+
+:root {
+  /*
+  Base component color of "Polar Night".
+
+  Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
+
+  Markup:
+  <div style="background-color:#2E3440; width=60; height=60"></div>
+
+  Styleguide Nord - Polar Night
+  */
+  --nord0: $nord0;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Used as a lighter background color for UI elements like status bars.
+
+  Markup:
+  <div style="background-color:#3B4252; width=60; height=60"></div>
+
+  Styleguide Nord - Polar Night
+  */
+  --nord1: $nord1;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Used as line highlighting in the editor.  
+  In the UI scope it may be used as selection- and hightlight color.
+
+  Markup:
+  <div style="background-color:#434C5E; width=60; height=60"></div>
+
+  Styleguide Nord - Polar Night
+  */
+  --nord2: $nord2;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Used for comments, invisibles, indent- and wrap guide marker.  
+  In the UI scope it may be used as pseudeoclass color for disabled elements.
+
+  Markup:
+  <div style="background-color:#4C566A; width=60; height=60"></div>
+
+  Styleguide Nord - Polar Night
+  */
+  --nord3: $nord3;
+
+  /*
+  Base component color of "Snow Storm".
+
+  Used for texts, carets and structuring characters like curly- and square brackets.  
+  In the UI scope it may be used as semi-light background depending on the theme shading design.
+
+  Markup:
+  <div style="background-color:#D8DEE9; width=60; height=60"></div>
+
+  Styleguide Nord - Snow Storm
+  */
+  --nord4: $nord4;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Used as a lighter background color for UI elements like status bars.  
+  It may also be used as semi-light background depending on the theme shading design.
+
+  Markup:
+  <div style="background-color:#E5E9F0; width=60; height=60"></div>
+
+  Styleguide Nord - Snow Storm
+  */
+  --nord5: $nord5;
+
+  /*
+  Lighter shade color of the base component color.
+
+  Usually be used as background depending on the theme shading design.  
+  In the UI scope it may be used as selection- and hightlight color.
+
+  Markup:
+  <div style="background-color:#ECEFF4; width=60; height=60"></div>
+
+  Styleguide Nord - Snow Storm
+  */
+  --nord6: $nord6;
+
+  /*
+  Bluish core color.
+
+  Most commonly used for
+    - classes/types
+    - attributes
+    - constants
+
+  Markup:
+  <div style="background-color:#8FBCBB; width=60; height=60"></div>
+
+  Styleguide Nord - Frost
+  */
+  --nord7: $nord7;
+
+  /*
+  Bluish core color.
+
+  Represents the accent color of the color palette.  
+  Can be used as main color for primary UI elements.  
+  Optionally used for methods/functions instead of @nord14
+
+  Also commonly used for
+    - documentation/annotation tags
+    - attribute values
+    - Markup quotes
+    - Markup link URLs
+
+  Markup:
+  <div style="background-color:#88C0D0; width=60; height=60"></div>
+
+  Styleguide Nord - Frost
+  */
+  --nord8: $nord8;
+
+  /*
+  Bluish core color.
+
+  Most commonly used for
+    - language-specific syntactic/reserved keywords
+    - operators
+    - tags
+    - punctuations like colon/semicolon, comma and braces
+
+  Can optionally be used for units and language-specific reserved special support characters (px/em, $, %).
+
+  Markup:
+  <div style="background-color:#81A1C1; width=60; height=60"></div>
+
+  Styleguide Nord - Frost
+  */
+  --nord9: $nord9;
+
+  /*
+  Bluish core color.
+
+  Most commonly used for
+    - Markup doctypes
+    - import/include/require statements
+    - pre-processor statements
+    - at-rules (@)
+
+  Markup:
+  <div style="background-color:#5E81AC; width=60; height=60"></div>
+
+  Styleguide Nord - Frost
+  */
+  --nord10: $nord10;
+
+  /*
+  Colorful component color.
+
+  Most commonly used for errors, git/diff deletion and linter marker.
+
+  Markup:
+  <div style="background-color:#BF616A; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord11: $nord11;
+
+  /*
+  Colorful component color.
+
+  Most commonly used for annotations and regular expressions.
+
+  Markup:
+  <div style="background-color:#D08770; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord12: $nord12;
+
+  /*
+  Colorful component color.
+
+  Most commonly used for escape characters, warnings, git/diff renamings and Markup entities.
+
+  Markup:
+  <div style="background-color:#EBCB8B; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord13: $nord13;
+
+  /*
+  Colorful component color.
+
+  Most commonly used for methods/functions, git/diff additions and success visualizations.
+
+  Markup:
+  <div style="background-color:#A3BE8C; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord14: $nord14;
+
+  /*
+  Colorful component color.
+
+  Most commonly used for numbers.
+
+  Markup:
+  <div style="background-color:#B48EAD; width=60; height=60"></div>
+
+  Styleguide Nord - Aurora
+  */
+  --nord15: $nord15;
+}