Docs: Add Sass recipe, improve setup instructions

docs/docs/gatsby-on-linux.md

@@ -4,12 +4,10 @@ title: Gatsby on Linux
 
 # Linux
 
-> This is a TODO. Help our community expand it.
-
-> Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your pull request gets accepted.
-
 ## Windows Subsystem Linux (WSL)
 
+This guide assumes that you already have WSL installed with an working Linux distro. If you don't, follow [this guide from microsoft's site](https://docs.microsoft.com/en-us/windows/wsl/install-win10) to install WSL and a Linux distro of your choice.
+
 As of October 17th 2017, Windows 10 ships with WSL and Linux distributions are available via the [Windows Store], there are several different distributions to use which can be configured via `wslconfig` if you have more than one distribution installed.
 
 ```shell
@@ -64,10 +62,11 @@ Or to install all at the same time and approve `(y)` all installs:
 sudo apt update && sudo apt -y upgrade && sudo apt install build-essential && sudo apt install git && sudo apt install libpng-dev
 ```
 
-<!-- links -->
+### Additional links and resources
 
-[windows store]: https://www.microsoft.com/en-us/store/p/ubuntu/9nblggh4msv6
-[n]: https://github.com/tj/n
-[n-install]: https://github.com/mklement0/n-install
-[nvm]: https://github.com/creationix/nvm
-[bash startup]: https://github.com/Microsoft/WSL/issues/776#issuecomment-266112578
+- [Super detailed guide to making VSCode work with ESL from VSCode's docs website](https://code.visualstudio.com/docs/remote/wsl)
+- [windows store](https://www.microsoft.com/en-us/store/p/ubuntu/9nblggh4msv6)
+- [n](https://github.com/tj/n)
+- [n-install](https://github.com/mklement0/n-install)
+- [nvm](https://github.com/creationix/nvm)
+- [bash startup](https://github.com/Microsoft/WSL/issues/776#issuecomment-266112578)

docs/docs/preparing-your-environment.md

@@ -5,9 +5,9 @@ overview: true
 
 To get started with Gatsby, you'll need to make sure you have the following software tools installed:
 
-1. [Node.js](/tutorial/part-zero/#install-nodejs)
-2. [npm CLI](/tutorial/part-zero/#familiarize-with-npm)
-3. [Gatsby CLI](/tutorial/part-zero/#install-the-gatsby-cli)
+1. [Node.js and npm](/tutorial/part-zero/#installing-nodejs-and-npm)
+2. [Git](/tutorial/part-zero/#install-git)
+3. [Gatsby CLI](/tutorial/part-zero/#using-the-gatsby-cli)
 
 For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/tutorial/part-zero/).
 

docs/docs/recipes.md

@@ -276,7 +276,7 @@ There are so many ways to add styles to your website; Gatsby supports almost eve
 
 1. Create a global CSS file as `src/styles/global.css` and paste the following into the file:
 
-```css:title=src/styles/styles/global.css
+```css:title=src/styles/global.css
 html {
  background-color: lavenderblush;
 }
@@ -468,6 +468,64 @@ Notice that the file extension is `.module.css` instead of `.css`, which tells G
 - More on [Using CSS Modules](/tutorial/part-two/#css-modules)
 - [Live example on Using CSS modules](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-css-modules)
 
+### Using SCSS/SASS
+
+Sass is an extension of CSS that gives you more advanced features like nested rules, variables, mixins, and more.
+
+Sass has 2 syntaxes. The most commonly used syntax is "SCSS", and is a superset of CSS. That means all valid CSS syntax, is valid SCSS syntax. SCSS files use the extension .scss
+
+Sass will compile .scss and .sass files to .css files for you, so you can write your stylesheets with more advanced features.
+
+#### Prerequisites
+
+- A [Gatsby site](/docs/quick-start/).
+
+#### Directions
+
+1. Install the Gatsby plugin [gatsby-plugin-sass](https://www.gatsbyjs.org/packages/gatsby-plugin-sass/) and `node-sass`.
+
+`npm install --save node-sass gatsby-plugin-sass`
+
+2. Include the plugin in your `gatsby-config.js` file.
+
+```javascript:title=gatsby-config.js
+plugins: [`gatsby-plugin-sass`],
+```
+
+3. Write your stylesheets as `.sass` or `.scss` files and import them. If you don't know how to import styles, take a look at [Styling with CSS](/docs/recipes/#2-styling-with-css)
+
+```css:title=styles.scss
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+ font: 100% $font-stack;
+ color: $primary-color;
+}
+```
+
+```css:title=styles.sass
+$font-stack: Helvetica, sans-serif
+$primary-color: #333
+
+body
+ font: 100% $font-stack
+ color: $primary-color
+```
+
+```javascript
+import "./styles.scss"
+import "./styles.sass"
+```
+
+_Note: You can use SASS/SCSS files as modules too, like mentioned above, with the difference that instead of .css the extensions have to be .scss or .sass_
+
+#### Additional resources
+
+- [Difference between .sass and .scss](https://responsivedesign.is/articles/difference-between-sass-and-scss/)
+- [Sass guide from the official Sass website](https://sass-lang.com/guide)
+- [A most complete installation tutorial on Sass with some more explanations and more resources](https://www.gatsbyjs.org/docs/sass/)
+
 ### Adding a Local Font
 
 #### Prerequisites

docs/tutorial/part-zero/index.md

@@ -10,47 +10,44 @@ Before you start building your first Gatsby site, you’ll need to familiarize y
 
 The command line is a text-based interface used to run commands on your computer. You’ll also often see it referred to as the terminal. In this tutorial, we’ll use both interchangeably. It’s a lot like using the Finder on a Mac or Explorer on Windows. Finder and Explorer are examples of graphical user interfaces (GUI). The command line is a powerful, text-based way to interact with your computer.
 
-Take a moment to locate and open up the command line interface (CLI) for your computer. Depending on which operating system you are using, see [**instructions for Mac**](http://www.macworld.co.uk/feature/mac-software/how-use-terminal-on-mac-3608274/), [**instructions for Windows**](https://www.quora.com/How-do-I-open-terminal-in-windows) or [**instructions for Linux**](https://www.howtogeek.com/140679/beginner-geek-how-to-start-using-the-linux-terminal/).
+Take a moment to locate and open up the command line interface (CLI) for your computer. Depending on which operating system you are using, see [**instructions for Mac**](http://www.macworld.co.uk/feature/mac-software/how-use-terminal-on-mac-3608274/), [**instructions for Windows**](https://www.lifewire.com/how-to-open-command-prompt-2618089) or [**instructions for Linux**](https://www.howtogeek.com/140679/beginner-geek-how-to-start-using-the-linux-terminal/).
 
-## Install Homebrew for Node.js
+_Note: If you’re new to the command line, "running" a command, means writing the text in the highlighted box in the command prompt, and hitting the Enter key”. Commands will be in a highlighted box like `node --version`, but not every highlighted box is a command! If something is a command it will be mentioned as something you have to run/execute._
 
-To install Gatsby and Node.js, it is recommended to use [Homebrew](https://brew.sh/). A little set-up in the beginning can save you from some headaches later on!
+## Mac prerequisites
 
-How to install or verify Homebrew on your computer:
+To install Gatsby and Node.js, we recommend you to use [Homebrew](https://brew.sh/). A little set-up in the beginning can save you from some headaches later on!
+
+### How to install or verify Homebrew on your computer:
 
 1. Open your Terminal.
 1. See if Homebrew is installed by running `brew -v`. You should see "Homebrew" and a version number.
-1. If not, download and install [Homebrew with the instructions](https://docs.brew.sh/Installation) for your operating system (Mac, Linux or Windows).
+1. If not, download and install [Homebrew with the instructions](https://docs.brew.sh/Installation).
 1. Once you've installed Homebrew, repeat step 2 to verify.
 
-### Mac Users: install Xcode Command Line Tools
+### Install Xcode Command Line Tools:
 
 1. Open your Terminal.
-1. On a Mac, install Xcode Command line tools by running `xcode-select --install`.
+1. Install Xcode Command line tools by running `xcode-select --install`.
  1. If that fails, download it [directly from the Apple site](https://developer.apple.com/download/more/), after signing-in with Apple developer account
 1. After being prompted to start the installation, you'll be prompted again to accept a software license for the tools to download.
 
-## ⌚ Install Node.js and npm
+## Installing Node.js and npm
 
-Node.js is an environment that can run JavaScript code outside of a web browser. Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have a recent version installed on your computer.
+Node.js is an environment that can run JavaScript code outside of a web browser. Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have a recent version installed on your computer. npm comes bundled with Node.js so if you don't have npm, chances are that you don't have Node.js too.
 
 _Note: Gatsby's minimum supported Node.js version is Node 8, but feel free to use a more recent version._
 
 1. Open your Terminal.
-1. Run `brew update` to make sure you have the latest version of Homebrew.
-1. Run this command to install Node and npm in one go: `brew install node`
-
-Once you have followed the installation steps, make sure everything was installed properly:
-
-### Check your Node.js installation
-
-1. Open up your terminal.
-2. Run `node --version`. (If you’re new to the command line, “run `command`” means “type `node --version` in the command prompt, and hit the Enter key”. From here on, this is what we mean by “run `command`”).
-3. Run `npm --version`.
-
-The output of each of those commands should be a version number. Your versions may not be the same as those shown below! If entering those commands doesn’t show you a version number, go back and make sure you have installed Node.js.
-
-![Check node and npm versions in terminal](01-node-npm-versions.png)
+1. Install Node.js for your appropriate operating system.
+ - On **MacOS** with homebrew installed, run `brew install node`. If you don't want to install it through homebrew, download the latest Node.js version from [the official Node.js website](https://nodejs.org/en/), double click on the downloaded file and go through the installation process.
+ - On **Windows**, download and install the latest Node.js version from [the official Node.js website](https://nodejs.org/en/)
+ - On **Linux**, run `sudo apt-get install curl`. After it finishes installing, run `curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -` and install Node.js by running `sudo apt-get install nodejs`. If it asks for confirmation, type `y` and press enter. If you're on Fedora, follow [this guide to install Node.js and npm](https://tecadmin.net/install-latest-nodejs-on-fedora/) instead.
+1. Verify you have Node.js and npm installed by running `node --version` and `npm --version` in the terminal.
+1. The output of each of those commands should be a version number. Your versions may not be the same as those shown below! If entering those commands doesn’t show you a version number, go back and make sure you have installed Node.js.
+ ![Check node and npm versions in terminal](01-node-npm-versions.png)
+
+Once you have followed the installation steps and you have checked everything is installed properly, you can continue to the next step:
 
 ## Install Git