# 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