Styling with Sass

In this section, we will learn ho

  1. To start using Sass, we will need to install it along with a few other dependencies.
    Open a terminal at the root folder of your project and run the following:
    npm install sass gatsby-plugin-sass
    Styling with Sass 37
    Here, we are installing the core Sass dependency as well as the Gatsby plugin that
    integrates it.
  2. Modify your gatsby-config.js file with the following:
    module.exports = {
    plugins: [
    ‘gatsby-plugin-sass’
    ],
    };
    Here, we are updating our Gatsby configuration to let Gatsby know to make use
    of the gatsby-plugin-sass plugin. Now, create a styles folder inside your
    src directory.
  1. Create a global.scss file in your styles folder and add the following:
    html {
    background-color: #f9fafb;
    font-family: -apple-system, “Segoe UI”, Roboto,
    Helvetica, Arial, sans-serif,
    “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI
    Symbol”;
    }
    I rarely add more than HTML styles to the global.scss file. Instead, I prefer
    to import other .scss files into this one. This keeps styles in order and the files
    small and readable. As an example, let’s create typography.scss to store some
    typography styles:
    h1 {
    color: #2563eb;
    size: 6rem;
    font-weight: 800;
    }
    p {
    color: #333333;
    }
    a {
    color: #059669;
    text-decoration: underline;
    }
  1. Here, we are adding a color to each and, in the case of the a tags, adding an
    underline to make them more prominent. We can now import this file into our global.scss file:
    @import ‘./typography;
    html {
    background-color: #f9fafb;
    font-family: -apple-system, “Segoe UI”, Roboto,
    Helvetica, Arial, sans-serif,
    “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI
    Symbol”;
  2. Navigate to your gatsby-browser.js file and add the following:
    import “./src/styles/global.scss”;
    This tells our Gatsby application to include this style sheet on the client, allowing us
    to make use of it in our application.
    You have now implemented Sass as a styling tool within your Gatsby site. You can
    disregard the other styling implementations that follow and proceed to the Creating
    a reusable layout section.
close

Stay Connected

We don’t spam! Read our privacy policy for more info.

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart