{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/react-js/sass","result":{"data":{"mdx":{"id":"cb83fcfb-f975-55a4-afec-1466d6f1d186","excerpt":"Introduction Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor, which adds special features such as variables, nested rules, and mixins into…","fields":{"slug":"/react-js/sass/"},"frontmatter":{"title":"Sass in React","description":"Sass | React | RefugeesCode | Styles | CSS | SCSS","image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Sass in React\",\n  \"description\": \"Sass | React | RefugeesCode | Styles | CSS | SCSS\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"introduction\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#introduction\",\n    \"aria-label\": \"introduction permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Introduction\"), mdx(\"p\", null, \"Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor, which adds special features such as variables, nested rules, and mixins into regular CSS. \"), mdx(\"h2\", {\n    \"id\": \"goals\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#goals\",\n    \"aria-label\": \"goals permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Goals\"), mdx(\"ul\", {\n    \"className\": \"contains-task-list\"\n  }, mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Create a folder structure for SASS in a React project\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Learn to set up SASS in a React project\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Learn to use mixins in SASS\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Learn to use variables in SASS\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Learn to use nesting in SASS\")), mdx(\"h2\", {\n    \"id\": \"basic-tools\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#basic-tools\",\n    \"aria-label\": \"basic tools permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Basic Tools\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://sass-lang.com/documentation/\"\n  }, \"Sass documentation\")), mdx(\"h2\", {\n    \"id\": \"contents\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#contents\",\n    \"aria-label\": \"contents permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Contents\"), mdx(\"h3\", {\n    \"id\": \"install-sass-in-your-react-project\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#install-sass-in-your-react-project\",\n    \"aria-label\": \"install sass in your react project permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Install Sass in your React project\"), mdx(\"p\", null, \"To use Sass in your react project you need to install the sass package. You can do this by running the following command in your terminal.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm i sass\\n\")), mdx(\"h3\", {\n    \"id\": \"folder-structure\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#folder-structure\",\n    \"aria-label\": \"folder structure permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Folder structure\"), mdx(\"p\", null, \"This is a typical folder structure for a React project with Sass. All the necessary files to use sass will be saved in a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"styles\"), \" folder in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" folder. \"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"/my-app\\n|-- node_modules/\\n|-- public/\\n|   |-- index.html\\n|   |-- favicon.ico\\n|-- src/\\n|   |-- components/\\n|   |   |-- App.js\\n|   |   |-- Header.js\\n|   |   |-- Footer.js\\n|   |-- styles/\\n|   |   |-- components/\\n|   |   |   |-- _Contact.scss\\n|   |   |   |-- _Footer.scss\\n|   |   |   |-- _Header.scss \\n|   |   |   |-- _Home.scss\\n|   |   |   |-- _Main.scss\\n|   |   |   |-- _NavBar.scss\\n|   |   |   |-- _Footer.scss\\n|   |   |-- utils/\\n|   |   |   |-- _mixins.scss\\n|   |   |   |-- _variables.scss\\n|   |   |-- style.scss\\n|   |-- index.js\\n|-- package.json\\n|-- .gitignore\\n\\n\")), mdx(\"p\", null, \"the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"components\"), \" folder will contain partials for each component of the application (note that partial files start with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_\"), \"). The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"utils\"), \" folder will contain \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mixins.scss\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"variables.scss\"), \". The index, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style.scss\"), \" file will import variables, mixins and components partials.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"// Variables\\n@import './utils/variables';\\n\\n// Mixins\\n@import './utils/mixins';\\n\\n// Base styles\\n@import './base/reset';\\n@import './base/typography';\\n\\n// Component styles\\n@import './components/NavBar';\\n@import './components/Header';\\n@import './components/Footer';\\n// ... import other component styles as needed\\n\")), mdx(\"h2\", {\n    \"id\": \"components\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#components\",\n    \"aria-label\": \"components permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"components\"), mdx(\"p\", null, \"We will create a partial file for each component (starting with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_\"), \") of the application and will give a class to the uppermost parent element of the component to apply the styles. Then we can use compound or nested selectors to style the elements inside the component.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/styles/components/_NavBar.scss\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \".nav-bar {\\n  background-color: #333;\\n  overflow: hidden;\\n\\n  li {\\n    float: left;\\n    display: block;\\n    color: #f2f2f2;\\n    text-align: center;\\n    padding: 14px 16px;\\n    text-decoration: none;\\n\\n    &:hover {\\n      background-color: #ddd;\\n      color: black;\\n    }\\n  }\\n}\\n\\n\")), mdx(\"p\", null, \"Then add the class to the component in the JSX file.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/components/NavBar.jsx\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport './NavBar.scss'; // Assuming you have a NavBar.scss file in the same directory\\n\\nconst NavBar = () => {\\n  return (\\n    <nav className=\\\"nav-bar\\\">\\n      <ul>\\n        <li><a href=\\\"/\\\">Home</a></li>\\n        <li><a href=\\\"/about\\\">About</a></li>\\n        <li><a href=\\\"/contact\\\">Contact</a></li>\\n      </ul>\\n    </nav>\\n  );\\n};\\n\\nexport default NavBar;\\n\")), mdx(\"p\", null, \"Remember to import your partials in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style.scss\"), \" file!\"), mdx(\"p\", null, \"More on nesting in Sass \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://refugeescode-materials.netlify.app/sass/contents#nesting\"\n  }, \"here\")), mdx(\"h2\", {\n    \"id\": \"mixins\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#mixins\",\n    \"aria-label\": \"mixins permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"mixins\"), mdx(\"p\", null, \"Mixins in Sass are a way of reusing a group of CSS declarations multiple times throughout your stylesheet.\"), mdx(\"p\", null, \"You can declare a mixins like this:\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/styles/utils/mixins.scss\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"@mixin center-content {\\n    display: flex;\\n    justify-content: center;\\n    align-items: center;\\n}\\n\")), mdx(\"p\", null, \"You can then use the @include keyword to reuse that block of code. \"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/styles/components/_component.scss\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"@import '../utils/mixins.scss';\\n\\n.box { \\n    @include center-content; //centers box content\\n    border: 1px solid black;\\n    }\\n\")), mdx(\"p\", null, \"Mixins also allow to receive arguments. \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://sass-lang.com/documentation/values/mixins/\"\n  }, \"More on mixins\")), mdx(\"h2\", {\n    \"id\": \"variables\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#variables\",\n    \"aria-label\": \"variables permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"variables\"), mdx(\"p\", null, \"Variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. \"), mdx(\"p\", null, \"This makes your code reusable, so if you want to change the color of several rules you can just change the variable value. Sass uses the $ symbol to make something a variable, used on the left side of the colon declares a variable name, used on the right calls its value.\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/styles/utils/variables.scss\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"$font-stack:    Helvetica, sans-serif;\\n$primary-color: #333;\\n\\nbody {\\n  font: 100% $font-stack;\\n  color: $primary-color;\\n}\\n\\n\")), mdx(\"h3\", {\n    \"id\": \"link-sass-to-your-react-project\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#link-sass-to-your-react-project\",\n    \"aria-label\": \"link sass to your react project permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Link Sass to your React project\"), mdx(\"p\", null, \"in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.jsx\"), \", import the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style.scss\"), \" file.\\nRemove the old css import.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport ReactDOM from 'react-dom/client';\\n//import './index.css';\\nimport './styles/style.scss';//Add this line\\nimport App from './App';\\nimport reportWebVitals from './reportWebVitals';\\n\\nconst root = ReactDOM.createRoot(document.getElementById('root'));\\nroot.render(\\n  <React.StrictMode>\\n    <App />\\n  </React.StrictMode>\\n);\\n\\n// If you want to start measuring performance in your app, pass a function\\n// to log results (for example: reportWebVitals(console.log))\\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\\nreportWebVitals();\\n\")), mdx(\"h2\", {\n    \"id\": \"exercises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#exercises\",\n    \"aria-label\": \"exercises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"ul\", {\n    \"className\": \"contains-task-list\"\n  }, mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Add SASS to your React project.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Create a folder structure for SASS in a React project.\"), mdx(\"li\", {\n    parentName: \"ul\",\n    \"className\": \"task-list-item\"\n  }, mdx(\"input\", {\n    parentName: \"li\",\n    \"type\": \"checkbox\",\n    \"checked\": false,\n    \"disabled\": true\n  }), \" \", \"Style your app with sass.\")));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":2,"value":"Introduction"},{"depth":2,"value":"Goals"},{"depth":2,"value":"Basic Tools"},{"depth":2,"value":"Contents"},{"depth":3,"value":"Install Sass in your React project"},{"depth":3,"value":"Folder structure"},{"depth":2,"value":"components"},{"depth":2,"value":"mixins"},{"depth":2,"value":"variables"},{"depth":3,"value":"Link Sass to your React project"},{"depth":2,"value":"Exercises"}]}},"pageContext":{"slug":"/react-js/sass/","prev":{"label":"API calls","link":"/react-js/apiCalls"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/react-js/sass.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}