Adding Sass Support

{{cookiecutter.repo_name}}/.env

@@ -0,0 +1 @@
+NODE_PATH=src/

{{cookiecutter.repo_name}}/README.md

@@ -15,6 +15,15 @@ $ nvm use
 $ yarn
 ```
 
+#### Using a pre-processor
+Should you wish to use SCSS instead of styled-components,
+SASS comes pre-included in this package.
+
+**Generally this is desired should javacript being required on the front-end not be necessary for the application**
+
+1. Replace 'import './global.css';' with 'import './styles/scss/app.scss';' in index.js
+2. You're done! Go forth and write your SCSS.
+
 ## Quick Start
 
 ```

{{cookiecutter.repo_name}}/package.json

@@ -6,15 +6,16 @@
   "private": true,
   "dependencies": {
     "jest-dom": "^2.0.4",
+    "node-sass": "^4.9.4",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
     "react-helmet": "^5.2.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.0.5",
     "react-snapshot": "^1.3.0",
+    "react-testing-library": "^5.2.0",
     "serve": "^10.0.2",
-    "styled-components": "^3.4.10",
-    "react-testing-library": "^5.2.0"
+    "styled-components": "^3.4.10"
   },
   "scripts": {
     "start": "react-scripts start",

{{cookiecutter.repo_name}}/src/components/Header.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import "./Header.scss";
 
 import Grid from './Grid';
 import Column from './Column';
@@ -29,7 +30,7 @@ export default (props) => (
       <Column width={12}>
         <StyledHeader>
           <Link to="/">
-            <img className="logo" src="/images/logo.svg" alt="{{ cookiecutter.project_name }}" height="auto" width={210} data-testid="home-image" />
+            <img className="logo thing" src="/images/logo.svg" alt="{{ cookiecutter.project_name }}" height="auto" width={210} data-testid="home-image" />
           </Link>
           <Nav />
         </StyledHeader>

{{cookiecutter.repo_name}}/src/components/Header.scss

@@ -0,0 +1,10 @@
+@import '~styles/scss/settings';
+
+.thing {
+    height: #{$xsmall-breakpoint};
+    // margin: 10rem;
+    @media #{$xsmall-only} {
+        padding: 6rem !important;
+        height: 1000px;
+    }
+}

{{cookiecutter.repo_name}}/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from 'react-snapshot';
 import './global.css';
+import './styles/scss/app.scss';
 import App from './App';
 import { BrowserRouter as Router } from 'react-router-dom';
 import * as serviceWorker from './serviceWorker';

{{cookiecutter.repo_name}}/src/styles/scss/_settings.scss

@@ -0,0 +1,28 @@
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+// Media Query Ranges
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// Breakpoints
+$xsmall-breakpoint: 350px;
+$small-breakpoint:  420px;
+$medium-breakpoint: 768px;
+$large-breakpoint:  1024px;
+$xlarge-breakpoint: 1720px;
+
+$screen: "only screen";
+
+// Media Queries
+$landscape: "#{$screen} and (orientation: landscape)";
+$portrait: "#{$screen} and (orientation: portrait)";
+
+$xsmall-only: "#{$screen} and (max-width: #{$xsmall-breakpoint})";
+
+$small-up: $screen;
+$small-only: "#{$screen} and (max-width: #{$small-breakpoint})";
+
+$medium-up: "#{$screen} and (min-width:#{$small-breakpoint + 1px})";
+$medium-only: "#{$screen} and (min-width:#{$small-breakpoint + 1px}) and (max-width:#{$medium-breakpoint})";
+$medium-down: "#{$screen} and (max-width:#{$medium-breakpoint + 1px})";
+
+$large-up: "#{$screen} and (min-width:#{$medium-breakpoint + 1px})";
+$large-only: "#{$screen} and (min-width:#{$medium-breakpoint + 1px}) and (max-width:#{$large-breakpoint + 1px})";

{{cookiecutter.repo_name}}/src/styles/scss/_utilities.scss

@@ -0,0 +1,59 @@
+// -----------------------------------
+// Margin
+// -----------------------------------
+.m0 { margin: 0rem !important; }
+.m1 { margin: 1rem !important; }
+.m2 { margin: 2rem !important; }
+
+.mt0 { margin-top: 0 !important; }
+.mth { margin-top: 0.5rem !important; }
+.mt1 { margin-top: 1rem !important; }
+.mt2 { margin-top: 2rem !important; }
+.mt2h { margin-top: 2.5rem !important; }
+
+.mb0 { margin-bottom: 0 !important; }
+.mbh { margin-bottom: 0.5rem !important; }
+.mb1 { margin-bottom: 1rem !important; }
+.mb2 { margin-bottom: 2rem !important; }
+.mb2h { margin-bottom: 2.5rem !important; }
+
+.mr0 { margin-right: 0 !important; }
+.mrh { margin-right: .5rem !important; }
+.mr1 { margin-right: 1rem !important; }
+.mr2 { margin-right: 2rem !important; }
+
+.ml0 { margin-left: 0 !important; }
+.mlh { margin-left: .5rem !important; }
+.ml1 { margin-left: 1rem !important; }
+.ml2 { margin-left: 2rem !important; }
+.ml3 { margin-left: 3rem !important; }
+
+// -----------------------------------
+// Padding
+// -----------------------------------
+.p0 { padding: 0 !important; }
+.p1 { padding: 1rem !important; }
+.p2 { padding: 2rem !important; }
+
+.pt0 { padding-top: 0 !important; }
+.pth { padding-top: 0.5rem !important; }
+.pt1 { padding-top: 1rem !important; }
+.pt2 { padding-top: 2rem !important; }
+.pt2h { padding-top: 2.5rem !important; }
+.pt3h { padding-top: 3.5rem !important; }
+
+.pb0 { padding-bottom: 0 !important; }
+.pbh { padding-bottom: 0.5rem !important; }
+.pb1 { padding-bottom: 1rem !important; }
+.pb2 { padding-bottom: 2rem !important; }
+.pb2h { padding-bottom: 2.5rem !important; }
+
+.pr0 { padding-right: 0 !important; }
+.prh { padding-right: .5rem !important; }
+.pr1 { padding-right: 1rem !important; }
+.pr2 { padding-right: 2rem !important; }
+
+.pl0 { padding-left: 0 !important; }
+.plh { padding-left: .5rem !important; }
+.pl1 { padding-left: 1rem !important; }
+.pl2 { padding-left: 2rem !important; }

{{cookiecutter.repo_name}}/src/styles/scss/app.scss

@@ -0,0 +1,2 @@
+@import "settings";
+@import "utilities";