Setup 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 the gatsby-plugin-sass plugin.

This recipe:

---

Installs necessary NPM packages.

<NPMPackage name="node-sass" /> <NPMPackage name="gatsby-plugin-sass" />

---

Installs the Emotion plugin in gatsby-config.js.

<GatsbyPlugin name="gatsby-plugin-sass" />

---

Writes 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.githubusercontent.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/documentation