[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects":671,"blog-author-\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects":1362,"i-material-symbols:arrow-back-rounded":1377},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1348,"date":1349,"description":1350,"draft":1351,"editorsPick":1351,"extension":1352,"featured":1351,"image":1353,"imageAlt":1354,"meta":1355,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1356,"seo":1357,"stem":1358,"tags":1359,"__hash__":1361},"blog\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects.md","How to Configure and Set Up Sass CSS for your Future React projects","Chisom Uma","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fisaac-junior.svg",null,"chisom-uma",{"type":679,"value":680,"toc":1327},"minimark",[681,686,698,702,710,713,717,720,723,728,731,750,754,757,768,781,788,791,797,801,804,810,813,818,834,840,844,858,864,868,889,895,898,904,907,911,931,937,943,954,960,963,969,972,976,982,988,1006,1012,1019,1025,1028,1034,1038,1054,1064,1070,1077,1086,1092,1095,1101,1105,1112,1118,1121,1126,1132,1140,1146,1163,1169,1172,1178,1181,1185,1195,1201,1204,1210,1221,1227,1233,1239,1246,1252,1256,1261,1267,1270,1276,1283,1289,1299,1305,1315,1319],[682,683,685],"h2",{"id":684},"tldr","TL;DR",[687,688,689,690,697],"p",{},"This article focuses on how to use and set up ",[691,692,696],"a",{"href":693,"rel":694},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002F",[695],"nofollow","Sass to CSS"," for your React projects. If you’re interested in learning more about Sass CSS, this article is perfect for you.",[682,699,701],{"id":700},"introduction","Introduction",[687,703,704,709],{},[691,705,708],{"href":706,"rel":707},"https:\u002F\u002Fsass-lang.com\u002Finstall",[695],"Syntactically Awesome Style Sheets"," (SASS) is a popular CSS preprocessor. The program converts SASS to CSS code, which can be used to quickly style HTML elements. Sass CSS controls how elements look on a website.",[687,711,712],{},"Sass is compatible with all CSS versions, and it provides multiple developer-friendly features such as variables, nesting, imports, and more. In this article, we’ll explore some of the features of Sass, go over how to set it up, and get it up and running in a React application.",[682,714,716],{"id":715},"why-use-sass-css","Why Use Sass CSS?",[687,718,719],{},"Since stylesheets are growing in size, complexity, and maintenance difficulty, a CSS preprocessor can be helpful in more involved situations.",[687,721,722],{},"Sass enables you to use features that are not existing in CSS, such as variables, nested rules, mixins, imports, inheritance, built-in functions, and more.",[724,725,727],"h3",{"id":726},"advantages-of-using-sass","Advantages of Using Sass",[687,729,730],{},"Next, let’s take a look at some of the attractive benefits of using Sass CSS:",[732,733,734,738,741,744,747],"ul",{},[735,736,737],"li",{},"Sass CSS lets you write clean, easy, and simple CSS in a programming construct.",[735,739,740],{},"It requires less code, allowing you to write CSS more quickly.",[735,742,743],{},"It’s more stable and robust because it is an extension of CSS, which makes work easier and more efficient for developers and designers.",[735,745,746],{},"It boasts compatibility with all versions of CSS. Therefore, using any available CSS libraries should be a seamless process.",[735,748,749],{},"Sass CSS makes provisions for nesting so that you can use nested syntax and valuable functions like color manipulation, math functions, and other values.",[682,751,753],{"id":752},"creating-our-react-project","Creating Our React Project",[687,755,756],{},"To start this Sass CSS tutorial we need to create our React project, the first thing we need to do is head to the terminal and type in the following command:",[758,759,764],"pre",{"className":760,"code":762,"language":763},[761],"language-text","npx create-react-app my-sass\n","text",[765,766,762],"code",{"__ignoreMap":767},"",[687,769,770,771,774,775,780],{},"If you don’t like ",[765,772,773],{},"create-react-app",", ",[691,776,779],{"href":777,"rel":778},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fcreate-react-app-alternatives",[695],"try out one of these alternatives."," The image below shows our simple React website, with our React environment files:",[687,782,783],{},[784,785],"img",{"alt":786,"src":787},"react website showing react environment files","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-001.png",[687,789,790],{},"This is what it looks like in the browser:",[687,792,793],{},[784,794],{"alt":795,"src":796},"webpage in browser showing text that reads 'hey guys'","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-002.png",[724,798,800],{"id":799},"folder-structure","Folder Structure",[687,802,803],{},"Now, let’s take a quick look at our folder structure below at our React environment files:",[687,805,806],{},[784,807],{"alt":808,"src":809},"react environment folder structure in ide","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-003.png",[687,811,812],{},"We have a pretty simple folder structure here. However, running Sass CSS in a project takes a little bit of previous knowledge, especially when configuring it. However, to make the process run a lot smoother, we can install two different extensions for VS Code:",[814,815,817],"h4",{"id":816},"extension-1","Extension 1",[732,819,820],{},[735,821,822,830,833],{},[691,823,826],{"href":824,"rel":825},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Syler.sass-indented",[695],[827,828,829],"strong",{},"Sass Extension",[827,831,832],{},":"," Sass helps with auto-complete formatting and highlighting:",[687,835,836],{},[784,837],{"alt":838,"src":839},"Sass extension in the vs code marketplace","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-004.png",[814,841,843],{"id":842},"extension-2","Extension 2",[732,845,846],{},[735,847,848,855,857],{},[691,849,852],{"href":850,"rel":851},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=glenn2223.live-sass",[695],[827,853,854],{},"Live Sass Compiler",[827,856,832],{}," Live Sass Compiler is a VS Code extension that enables us to compile\u002Ftranspile our SASS\u002FSCSS files to CSS files in real-time with live browser reloads:",[687,859,860],{},[784,861],{"alt":862,"src":863},"Live Sass compiler in the VS Code marketplace","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-005.png",[682,865,867],{"id":866},"navbar","Navbar",[687,869,870,871,874,875,878,879,881,882,885,886,888],{},"The first thing we’ll build in our demo React project is our Navbar. However, first, we need to create our ",[765,872,873],{},"Component"," folder in our ",[765,876,877],{},"src",", and then create a file in our ",[765,880,873],{}," folder named ",[765,883,884],{},"Navbar.js",". In our ",[765,887,884],{}," file, we will edit our code to be like this:",[758,890,893],{"className":891,"code":892,"language":763},[761],"import React from 'react'\nfunction Navbar() {\n return (\n Home About Profile Contact \n   )\n}\nexport default Navbar\n",[765,894,892],{"__ignoreMap":767},[687,896,897],{},"The image below shows the result on the browser:",[687,899,900],{},[784,901],{"alt":902,"src":903},"webpage in browser showing text that reads 'HomeAboutProfileContact'","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-006.png",[687,905,906],{},"This is a simple UI for our Navbar, but how do we transform it and make it look better with Sass CSS? The first thing we want to do is create a styles folder.",[682,908,910],{"id":909},"creating-our-styles-folder","Creating our Styles Folder",[687,912,913,914,916,917,920,921,923,924,927,928,930],{},"In this section, we’ll create our styles folder to write our Sass code. The first step is to go to the ",[765,915,877],{}," folder and create a ",[765,918,919],{},"styles"," folder that will hold the CSS and Sass of our application. Next, we create a file in our ",[765,922,919],{}," folder and name it ",[765,925,926],{},"Navbar.scss",". In the ",[765,929,926],{}," file, you can write regular CSS, as there are not many differences between the two. This is good because you can quickly transfer your CSS knowledge to your newly acquired Sass knowledge.",[687,932,933,934,936],{},"Now, in ",[765,935,926],{},", we can make the following changes:",[758,938,941],{"className":939,"code":940,"language":763},[761],".navbar{\n  width:100%;\n  height: 80px;\n  background-color: grey;\n}\n",[765,942,940],{"__ignoreMap":767},[687,944,945,946,949,950,953],{},"Before checking to see if this code works in the browser, we should first ",[765,947,948],{},"import '..\u002FStyles\u002FNavbar.css';"," into the ",[765,951,952],{},"App.js"," file, then click on “watch sass” located in the bottom right corner of our VS Code editor. This will then automatically generate these two files shown in the image below:",[687,955,956],{},[784,957],{"alt":958,"src":959},"automatically generated CSS files","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-007.png",[687,961,962],{},"This is because we’re using the Live Sass Compiler extension. When we check our demo project in the browser, we’ll see the image below as the result of our CSS:",[687,964,965],{},[784,966],{"alt":967,"src":968},"webpage in browser showing text that reads 'HomeAboutProfileContact' and a gray header banner","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-008.png",[687,970,971],{},"Although we can see the CSS grey color in our browser, we still have not done much with Sass yet.",[682,973,975],{"id":974},"sass-css-variables","Sass CSS Variables",[687,977,978,979,981],{},"The great thing about Sass is that we can define variables, as seen in the code changes made in our ",[765,980,926],{}," below:",[758,983,986],{"className":984,"code":985,"language":763},[761],"$blackColor: rgb(24, 24, 24);\n.navbar{\n  width:100%;\n  height: 80px;\n  background-color: $blackColor;\n}\n",[765,987,985],{"__ignoreMap":767},[687,989,990,991,994,995,998,999,1002,1003,1005],{},"Here, we first defined a variable called ",[765,992,993],{},"BlackColor",", then set it equal to the ",[765,996,997],{},"rgb"," value ",[765,1000,1001],{},"black",". So, instead of using the ",[765,1004,997],{}," value every time we want to render black, we can simply render the color like this:",[758,1007,1010],{"className":1008,"code":1009,"language":763},[761],"background-color: $blackColor;\n",[765,1011,1009],{"__ignoreMap":767},[687,1013,1014,1015,1018],{},"When we save this, it compiles, and we can see the changes in ",[765,1016,1017],{},"Navbar.css"," like this:",[758,1020,1023],{"className":1021,"code":1022,"language":763},[761],".navbar {\n width: 100%;\n height: 80px;\n background-color: rgb(24, 24, 24);\n}\u002F*# sourceMappingURL=Navbar.css.map *\u002F\n",[765,1024,1022],{"__ignoreMap":767},[687,1026,1027],{},"This is what it should look like now in our browser:",[687,1029,1030],{},[784,1031],{"alt":1032,"src":1033},"webpage in browser showing small text that reads 'HomeAboutProfileContact' and a dark gray header banner","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-009.png",[724,1035,1037],{"id":1036},"organize-folder-structure-for-sass-variables","Organize folder Structure for Sass variables",[687,1039,1040,1041,1043,1044,1047,1048,881,1050,1053],{},"Now, one thing we can do to improve our folder and design structure is to create a separate file only for our variables. To do that, we’ll first create a folder in our ",[765,1042,877],{}," called ",[765,1045,1046],{},"Variables",", then create a file in the ",[765,1049,1046],{},[765,1051,1052],{},"Variables.scss",", where we declare all of the different variables we’ll be using in our demo app.",[687,1055,1056,1057,1059,1060,1063],{},"The reason for this is that the whole point of declaring a variable is to be able to reuse that variable. For instance, if we want to use the black color in different Sass files, we can define it in the ",[765,1058,1052],{}," file, and instead of directly defining the variable in our ",[765,1061,1062],{},"Navbar.scss file",", we can simply make the following changes:",[758,1065,1068],{"className":1066,"code":1067,"language":763},[761],"@import \"..\u002FVariables\u002FVariables.scss\";\n$blackColor: rgb(24, 24, 24);\n.navbar{\n  width:100%;\n  height: 80px;\n  background-color: $blackColor;\n}\n",[765,1069,1067],{"__ignoreMap":767},[687,1071,1072,1073,1076],{},"What we did above is import from the path to this file, which is ",[765,1074,1075],{},"\"..\u002FVariables\u002FVariables.scss\"",". When we check the project on our browser, we’ll notice that everything works and the background color is still black.",[687,1078,1079,1080,1082,1083,1085],{},"Now, let’s style our Navbar a little bit more by making the following code changes in our ",[765,1081,1052],{}," and ",[765,1084,1017],{}," files:",[758,1087,1090],{"className":1088,"code":1089,"language":763},[761],"\u002F\u002FVariables.scss\n$blackColor: rgb(26, 26, 26);\n$whiteColor: rgb(232, 232, 232);\n\u002F\u002FNavbar.scss\n@import \"..\u002FVariables\u002FVariables.scss\";\n$blackColor: rgb(24, 24, 24);\n.navbar{\n  width:100%;\n  height: 80px;\n  background-color: $blackColor;\n}\n.navbar a{\n  color: $whiteColor;\n  font-size: 25px;\n  text-decoration: none;\n}\n",[765,1091,1089],{"__ignoreMap":767},[687,1093,1094],{},"The image below shows us the changes in the browser:",[687,1096,1097],{},[784,1098],{"alt":1099,"src":1100},"webpage in browser showing white text that reads 'HomeAboutProfileContact' and a black header banner","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-010.png",[682,1102,1104],{"id":1103},"declaring-a-font-in-sass-css","Declaring a Font in Sass CSS",[687,1106,1107,1108,1082,1110,1085],{},"To declare a font, we have to make the following code changes to our ",[765,1109,1052],{},[765,1111,1017],{},[758,1113,1116],{"className":1114,"code":1115,"language":763},[761],"\u002F\u002FVariables.scss\n\u002F\u002F\u002FColors\n$blackColor: rgb(26, 26, 26);\n$whiteColor: rgb(232, 232, 232);\n\u002F\u002F\u002FFonts\n$titleFont: Arial, Helvetica, sans-serif;\n$bodyFont: 'Times New Roman', Times, Serif;\n\u002F\u002FNavbar.scss\n@import \"..\u002FVariables\u002FVariables.scss\";\n.navbar{\n   width:100%;\n   height: 80px;\n   background-color: $blackColor;\n   display: flex;\n   justify-content: center;\n   align-items: center;\n}\n.navbar a{\n   color: $whiteColor;\n   font-size: 25px;\n   text-decoration: none;\n   font-family: $titleFont;\n}\n",[765,1117,1115],{"__ignoreMap":767},[687,1119,1120],{},"The image below shows the changes made to our project in the browser:",[687,1122,1123],{},[784,1124],{"alt":767,"src":1125},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-011.png",[687,1127,1128,1129,1131],{},"This image shows that our text moved to the center, and the font changed as a result of our Sass variable declared in the ",[765,1130,1052],{}," file.",[687,1133,1134,1135,1082,1137,1139],{},"Next, let’s make some more changes to this in our ",[765,1136,884],{},[765,1138,926],{}," file:",[758,1141,1144],{"className":1142,"code":1143,"language":763},[761],"\u002F\u002FNavbar.js\nimport React from 'react'\nimport '..\u002FStyles\u002FNavbar.css';\nfunction Navbar() {\n   return (\n                      Home           About           Profile           Contact                 \n   );\n}\nexport default Navbar\n",[765,1145,1143],{"__ignoreMap":767},[687,1147,1148,1149,1152,1153,1156,1157,1160,1161,1139],{},"Here, we created a ",[765,1150,1151],{},"div",", then a ",[765,1154,1155],{},"className"," of ",[765,1158,1159],{},"links",", and then made the following changes to our ",[765,1162,926],{},[758,1164,1167],{"className":1165,"code":1166,"language":763},[761],"\u002F\u002FNavbar.scss\n@import \"..\u002FVariables\u002FVariables.scss\";\n.navbar{\n  width:100%;\n  height: 80px;\n  background-color: $blackColor;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.navbar a{\n  color: $whiteColor;\n  font-size: 25px;\n  text-decoration: none;\n  font-family: $titleFont;\n  margin: 10px;\n}\n.navbar .links {\n  margin-right: 50px;\n}\nbody {\n  margin: 0%;\n  padding: 0%;\n}\n",[765,1168,1166],{"__ignoreMap":767},[687,1170,1171],{},"In the image below, we see that we now have a beautiful Navbar:",[687,1173,1174],{},[784,1175],{"alt":1176,"src":1177},"black and white styled CSS navbar","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-012.png",[687,1179,1180],{},"Cool, right?",[682,1182,1184],{"id":1183},"creating-and-styling-our-main-page-in-sass-css","Creating and Styling our Main Page in Sass CSS",[687,1186,1187,1188,1190,1191,1194],{},"To create our main page, the first thing we’ll want to do is create another component file in our ",[765,1189,873],{}," folder, named ",[765,1192,1193],{},"MainPage.js",". Let’s make the following changes in our newly created component file:",[758,1196,1199],{"className":1197,"code":1198,"language":763},[761],"import React from 'react'\nfunction MainPage() {\n return (\n         Welcome to Pieces!     \n   );\n}\nexport default MainPage;\n",[765,1200,1198],{"__ignoreMap":767},[687,1202,1203],{},"We can see the result in the image below:",[687,1205,1206],{},[784,1207],{"alt":1208,"src":1209},"black and white styled CSS navbar with the title 'welcome to pieces' shown below","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-013.png",[687,1211,1212,1213,1216,1217,1220],{},"There’s one thing that’s important to understand in Sass: If we want to access or edit our ",[765,1214,1215],{},"H1"," tag for example, we can create another styles file called ",[765,1218,1219],{},"MainPage.scss",", and make the following changes:",[758,1222,1225],{"className":1223,"code":1224,"language":763},[761],"@import \"..\u002FVariables\u002FVariables.scss\";\n.MainPage{\n display: flex;\n justify-content: center;\n align-items: center;\n}\nh1 {\n color: $redColor;\n}\n",[765,1226,1224],{"__ignoreMap":767},[687,1228,1229,1230,1232],{},"In our ",[765,1231,1052],{}," file, we can add these changes:",[758,1234,1237],{"className":1235,"code":1236,"language":763},[761],"$blackColor: rgb(26, 26, 26);\n$whiteColor: rgb(232, 232, 232);\n$redColor: rgb(175, 2, 2);\n",[765,1238,1236],{"__ignoreMap":767},[687,1240,1241,1242,1245],{},"Here, we added ",[765,1243,1244],{},"$redColor: rgb(175, 2, 2);",", which makes the text red. We can see the result in the image below:",[687,1247,1248],{},[784,1249],{"alt":1250,"src":1251},"black and white styled CSS navbar with a red title 'welcome to pieces' shown below","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-014.png",[682,1253,1255],{"id":1254},"creating-and-styling-our-button-in-sass-css","Creating and Styling Our Button in Sass CSS",[687,1257,1258,1259,1139],{},"Next, we’re going to create a button and style it using Sass CSS. What we want to do is create a specific style for this button, and then reuse it many times throughout our demo application. To accomplish this, we’ll make the following changes to our ",[765,1260,1219],{},[758,1262,1265],{"className":1263,"code":1264,"language":763},[761],"@import \"..\u002FVariables\u002FVariables.scss\";\n.MainPage{\n display: flex;\n justify-content: center;\n align-items: center;\n}\nh1 {\n color: $redColor;\n}\nbutton {\n width: 200px;\n height: 40px;\n background-color: $redColor;\n border: none;\n border-radius: 8px;\n color: $whiteColor;\n font-size: 25px;\n}\n",[765,1266,1264],{"__ignoreMap":767},[687,1268,1269],{},"When we check the result on our browser, this is how our button looks:",[687,1271,1272],{},[784,1273],{"alt":1274,"src":1275},"black and white styled CSS navbar with a red title 'welcome to pieces' and a red 'click here' button shown below","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fimg-015.png",[687,1277,1278,1279,1282],{},"Now, we want to use an essential syntax in Sass known as ",[765,1280,1281],{},"@Mixin",", which serves as a function:",[758,1284,1287],{"className":1285,"code":1286,"language":763},[761],"\u002F\u002F\u002FVariables.scss\n\u002F\u002FColors\n$blackColor: rgb(26, 26, 26);\n$whiteColor: rgb(232, 232, 232);\n$redColor: rgb(175, 2, 2);\n\u002F\u002FFonts\n$titleFont: Arial, Helvetica, sans-serif;\n$bodyFont: 'Times New Roman', Times, Serif;\n@mixin buttonStyle {\n  width: 200px;\n  height: 40px;\n  background-color: $redColor;\n  border: none;\n  border-radius: 8px;\n  color: $whiteColor;\n  font-size: 25px;\n}\n",[765,1288,1286],{"__ignoreMap":767},[687,1290,1291,1292,1295,1296,1298],{},"Here, we declared the name of a specific style called ",[765,1293,1294],{},"buttonStyle"," and passed in our button style. In our ",[765,1297,1219],{}," file, the following changes were made:",[758,1300,1303],{"className":1301,"code":1302,"language":763},[761],"\u002F\u002FMainPage.scss\n@import \"..\u002FVariables\u002FVariables.scss\";\n.MainPage{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\nh1 {\n  color: $redColor;\n}\n button {\n   @include buttonStyle();\n }\n",[765,1304,1302],{"__ignoreMap":767},[687,1306,1307,1308,1311,1312,1314],{},"In our button, we ",[765,1309,1310],{},"@include"," the ",[765,1313,1294],{}," mixin that we created. By checking the demo application in our browser, we can see that everything still works seamlessly.",[682,1316,1318],{"id":1317},"conclusion","Conclusion",[687,1320,1321,1322],{},"In this article, we looked at how we can configure and set up Sass for CSS in a React environment. We also looked at how we can create Sass variables, as well as how to use Sass mixin as a function. Check out the ",[691,1323,1326],{"href":1324,"rel":1325},"https:\u002F\u002Fgithub.com\u002FChisomUma\u002FSass-Project",[695],"source repository for this project on GitHub.",{"title":767,"searchDepth":1328,"depth":1328,"links":1329},2,[1330,1331,1332,1336,1339,1340,1341,1344,1345,1346,1347],{"id":684,"depth":1328,"text":685},{"id":700,"depth":1328,"text":701},{"id":715,"depth":1328,"text":716,"children":1333},[1334],{"id":726,"depth":1335,"text":727},3,{"id":752,"depth":1328,"text":753,"children":1337},[1338],{"id":799,"depth":1335,"text":800},{"id":866,"depth":1328,"text":867},{"id":909,"depth":1328,"text":910},{"id":974,"depth":1328,"text":975,"children":1342},[1343],{"id":1036,"depth":1335,"text":1037},{"id":1103,"depth":1328,"text":1104},{"id":1183,"depth":1328,"text":1184},{"id":1254,"depth":1328,"text":1255},{"id":1317,"depth":1328,"text":1318},"Software Development","2023-02-07T00:00:00.000Z","Sass CSS is compatible with all CSS versions and provides multiple developer-friendly features. Let's explore how to use it in a React app.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects\u002Fhero.jpeg","decorative cover image showing person working on a laptop",{},"\u002Fblog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects",{"title":673,"description":1350},"blog\u002Fhow-to-configure-and-set-up-sass-css-for-your-future-react-projects",[1360],"css; react-7","Gne51uThSy8LO_o7Ylv6etuwbtAXIy3jEf3DN93aRuM",{"id":1363,"title":674,"body":1364,"description":1368,"draft":1351,"extension":1352,"meta":1371,"navigation":32,"path":1372,"photo":1373,"photoAlt":676,"seo":1374,"stem":1375,"__hash__":1376},"authors\u002Fauthors\u002Fchisom-uma.md",{"type":679,"value":1365,"toc":1369},[1366],[687,1367,1368],{},"A software developer from Nigeria who is passionate about sharing knowledge in web development, as well as continuous learning in the development community.",{"title":767,"searchDepth":1328,"depth":1328,"links":1370},[],{},"\u002Fauthors\u002Fchisom-uma","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fchisom-uma.png",{"title":674,"description":1368},"authors\u002Fchisom-uma","MHuQPQwsrL0xjtKa50Tyk0bEf3BeNxAAPDvgvSoN40s",{"left":1378,"top":1378,"width":1379,"height":1379,"rotate":1378,"vFlip":1351,"hFlip":1351,"body":1380},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]