Add Sass recipe

packages/gatsby/src/recipes/mdx-src/sass.mdx

@@ -0,0 +1,39 @@
+# Setup Gatsby with Sass
+
+Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. In Gatsby, Sass code can be translated to well-formatted, standard CSS using a plugin.
+
+---
+
+Install necessary NPM packages
+
+<NPMPackage name="node-sass" />
+<NPMPackage name="gatsby-plugin-sass" />
+
+---
+
+Install the Emotion plugin in gatsby-config.js
+
+<GatsbyPlugin name="gatsby-plugin-sass" />
+
+---
+
+Sweet, now it's ready to go.
+
+Let's also write out an example stylesheet and page you can use to play
+with Sass.
+
+<File
+  path="src/styles.scss"
+  content="https://gist.githubusercontent.com/marcysutton/19f2efe390e9485968c8fef37795d8ea/raw/2de533ef017bb42b16825670b923a0cd912cc808/styles.scss"
+/>
+
+<File
+  content="https://gist.githuusercontent.com/marcysutton/19f2efe390e9485968c8fef37795d8ea/raw/2de533ef017bb42b16825670b923a0cd912cc808/example-page.js"
+  path="src/pages/example-page.js"
+/>
+
+---
+
+Read more about Sass on the official Sass docs site:
+
+https://sass-lang.com/documentationb

packages/gatsby/src/recipes/todo.md

@@ -35,6 +35,7 @@
 - [ ] Make port selection dynamic
 - [ ] Add large warning to recipes output that this is an experimental feature & might change at any moment + link to docs / umbrella issue for bug reports & discussions
 - [ ] use yarn/npm based on the user config
+- [ ] test modifying gatsby-config.js from default starter
 - [ ] integration test for each resource (read, create, update, delete)
 - [ ] update shadow file resource
 - [ ] write tests for remote files src in File