[{"id":"a9ff3255-e13a-4953-a229-a7396d2456bc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Sass / SCSS","styles":{}}],"children":[]},{"id":"25d82a9b-6493-4554-81fd-7765189dbd90","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass / SCSS","styles":{"bold":true}},{"type":"text","text":" is a CSS preprocessor that lets you write CSS with extra features, then compiles it into normal CSS.","styles":{}}],"children":[]},{"id":"352f3dbb-4631-46f8-9679-bfd373091092","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"ac291d3f-d1aa-46df-80e6-cef0a8fb55c2","type":"procode","props":{"code":"Sass / SCSS = CSS with extra features\n","language":"txt","filename":"","files":"[{\"id\":\"gymk7v49d\",\"name\":\"code\",\"code\":\"Sass / SCSS = CSS with extra features\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"44943f4d-6e16-446a-b367-0bdf90e25b8f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"51021017-84cc-49c2-8813-8197ee449f64","type":"procode","props":{"code":"$primary-color: #6d28d9;\n\n.button {\n background-color: $primary-color;\n\n &:hover {\n background-color: #5b21b6;\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"5farpyu8j\",\"name\":\"code\",\"code\":\"$primary-color: #6d28d9;\\n\\n.button {\\n background-color: $primary-color;\\n\\n &:hover {\\n background-color: #5b21b6;\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"276c0cee-4590-4573-8c08-8f982d5d652d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SCSS is the most common Sass syntax because it looks very similar to normal CSS. Sass documentation explains that SCSS uses the ","styles":{}},{"type":"text","text":".scss","styles":{"code":true}},{"type":"text","text":" extension and is mostly a superset of CSS, which means valid CSS is usually valid SCSS too.","styles":{}}],"children":[]},{"id":"e59c98e6-58c9-43c5-826d-a1cd85daeade","type":"divider","props":{},"children":[]},{"id":"ef96110d-ea44-4107-9957-06894c02d58b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"58c56825-9ccc-41f2-bb59-0ccd1fdcdee9","type":"procode","props":{"code":"Sass / SCSS\n├── Extends normal CSS\n├── Uses .scss or .sass files\n├── Supports variables\n├── Supports nesting\n├── Supports mixins\n├── Supports partial files\n├── Supports modules with @use\n├── Compiles into normal CSS\n├── Works with React\n└── Good for organized styling\n","language":"txt","filename":"","files":"[{\"id\":\"chxheo6o6\",\"name\":\"code\",\"code\":\"Sass / SCSS\\n├── Extends normal CSS\\n├── Uses .scss or .sass files\\n├── Supports variables\\n├── Supports nesting\\n├── Supports mixins\\n├── Supports partial files\\n├── Supports modules with @use\\n├── Compiles into normal CSS\\n├── Works with React\\n└── Good for organized styling\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"af6f04b7-5af7-4167-8859-17e772021684","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ba2d5d42-43c5-408f-ac0a-b599fba0a632","type":"procode","props":{"code":"You write SCSS.\nBuild tool converts it into CSS.\nBrowser reads normal CSS.\n","language":"txt","filename":"","files":"[{\"id\":\"gswx2smjo\",\"name\":\"code\",\"code\":\"You write SCSS.\\nBuild tool converts it into CSS.\\nBrowser reads normal CSS.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bdd0abf3-6b02-4679-9fe9-eef87ce6f943","type":"divider","props":{},"children":[]},{"id":"45d4c4b8-6a8d-49fa-9a8e-4de7c34a4e0e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Sass vs SCSS","styles":{}}],"children":[]},{"id":"fb65a28c-09e1-4901-85c3-60caf0bdb32b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"There are two Sass syntaxes:","styles":{}}],"children":[]},{"id":"3fbc6a90-d6fa-41a5-b6a1-1b69df144dca","type":"procode","props":{"code":"SCSS\n├── Uses .scss\n├── Uses braces {}\n├── Uses semicolons ;\n├── Looks like CSS\n└── Most common in React projects\n\nSass\n├── Uses .sass\n├── Uses indentation\n├── No braces\n├── No semicolons\n└── Less common for beginners\n","language":"txt","filename":"","files":"[{\"id\":\"8xmcp2vcu\",\"name\":\"code\",\"code\":\"SCSS\\n├── Uses .scss\\n├── Uses braces {}\\n├── Uses semicolons ;\\n├── Looks like CSS\\n└── Most common in React projects\\n\\nSass\\n├── Uses .sass\\n├── Uses indentation\\n├── No braces\\n├── No semicolons\\n└── Less common for beginners\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f5fa3dec-c218-4312-aaf9-1a46d7de2898","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SCSS example:","styles":{}}],"children":[]},{"id":"ce2e5a82-1cfa-4476-af75-2bdeb54c4714","type":"procode","props":{"code":".card {\n padding: 24px;\n\n .title {\n font-size: 24px;\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"u4fjj7cnu\",\"name\":\"code\",\"code\":\".card {\\n padding: 24px;\\n\\n .title {\\n font-size: 24px;\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0fd52b2a-29d3-403f-8705-3a26c2ec12f4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass example:","styles":{}}],"children":[]},{"id":"1a743faa-744b-44c8-8b03-f45139906938","type":"procode","props":{"code":".card\n padding: 24px\n\n .title\n font-size: 24px\n","language":"sass","filename":"","files":"[{\"id\":\"707p73c65\",\"name\":\"code\",\"code\":\".card\\n padding: 24px\\n\\n .title\\n font-size: 24px\\n\",\"language\":\"sass\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b40fa879-2fab-4e0c-a2bf-ce131fc295e7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"ef1957f2-44a6-4b32-8f93-63e28a05ae97","type":"procode","props":{"code":"For React projects, use SCSS first.\n","language":"txt","filename":"","files":"[{\"id\":\"u4suzbqql\",\"name\":\"code\",\"code\":\"For React projects, use SCSS first.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6d02841f-7cb0-4552-b459-23bf8772f4f1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass documentation says the indented Sass syntax uses ","styles":{}},{"type":"text","text":".sass","styles":{"code":true}},{"type":"text","text":", while SCSS uses ","styles":{}},{"type":"text","text":".scss","styles":{"code":true}},{"type":"text","text":" and is easier for many people because it is close to CSS.","styles":{}}],"children":[]},{"id":"4e905575-4c7b-4e47-96bf-dcc6c6a70845","type":"divider","props":{},"children":[]},{"id":"e8a4e1a4-b41a-4fef-9644-e991e77d20f4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Install Sass in React Vite","styles":{}}],"children":[]},{"id":"d3c062b1-0f97-451a-8f81-fec4793fdfbc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For a React Vite project, install Sass:","styles":{}}],"children":[]},{"id":"2345556d-8f7f-44d7-b505-a13d8b041c12","type":"procode","props":{"code":"pnpm add -D sass\n","language":"bash","filename":"","files":"[{\"id\":\"ueoh9st1p\",\"name\":\"code\",\"code\":\"pnpm add -D sass\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a2e1ed6a-05c2-4a82-a19f-1f73765bbf5c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"or:","styles":{}}],"children":[]},{"id":"078d94ae-cbb8-424f-9e37-5e755a0e9e98","type":"procode","props":{"code":"npm install -D sass\n","language":"bash","filename":"","files":"[{\"id\":\"1nkooaa1y\",\"name\":\"code\",\"code\":\"npm install -D sass\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"84dbfa54-0aad-401d-b1de-d10cfbe9a070","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then you can import ","styles":{}},{"type":"text","text":".scss","styles":{"code":true}},{"type":"text","text":" files directly:","styles":{}}],"children":[]},{"id":"07741f12-4675-42ed-a814-7b65847be7f3","type":"procode","props":{"code":"import \"./styles.scss\"\n\nexport default function App() {\n return

Hello React

\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"a22yfizud\",\"name\":\"code\",\"code\":\"import \\\"./styles.scss\\\"\\n\\nexport default function App() {\\n return

Hello React

\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ccacdd70-df1f-48d0-b53e-369d4dc7b5fb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Vite provides built-in support for ","styles":{}},{"type":"text","text":".scss","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":".sass","styles":{"code":true}},{"type":"text","text":" files, but the Sass preprocessor package still needs to be installed. Vite also supports CSS Modules with preprocessors by using names like ","styles":{}},{"type":"text","text":"style.module.scss","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"385d1ed7-4c36-4a3c-b460-8d1898d33dba","type":"divider","props":{},"children":[]},{"id":"408dc869-4055-48d4-be76-954726412dec","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Basic Project Structure","styles":{}}],"children":[]},{"id":"34c6b3bb-c4bf-4ceb-8291-c6e1fb18e606","type":"procode","props":{"code":"src/\n├── main.tsx\n├── App.tsx\n├── styles/\n│ ├── globals.scss\n│ ├── _variables.scss\n│ ├── _mixins.scss\n│ └── _reset.scss\n│\n└── components/\n └── Button/\n ├── Button.tsx\n └── Button.module.scss\n","language":"txt","filename":"","files":"[{\"id\":\"yl2wpmmbv\",\"name\":\"code\",\"code\":\"src/\\n├── main.tsx\\n├── App.tsx\\n├── styles/\\n│ ├── globals.scss\\n│ ├── _variables.scss\\n│ ├── _mixins.scss\\n│ └── _reset.scss\\n│\\n└── components/\\n └── Button/\\n ├── Button.tsx\\n └── Button.module.scss\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7435ea91-28df-4353-966f-46c2f9a47397","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"b05ebc71-305c-4575-a9db-e2ade23ccb97","type":"procode","props":{"code":"globals.scss → global styles\n_variables.scss → reusable variables\n_mixins.scss → reusable mixins\n_reset.scss → reset/base CSS\nButton.module.scss → scoped component style\n","language":"txt","filename":"","files":"[{\"id\":\"vsocl168w\",\"name\":\"code\",\"code\":\"globals.scss → global styles\\n_variables.scss → reusable variables\\n_mixins.scss → reusable mixins\\n_reset.scss → reset/base CSS\\nButton.module.scss → scoped component style\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db2a66ba-977d-4717-824f-46383f85696d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e8b86744-1279-415c-8b36-2b239be5f8ca","type":"procode","props":{"code":"Global style → styles folder\nComponent style → component folder\n","language":"txt","filename":"","files":"[{\"id\":\"qe0lgcg4x\",\"name\":\"code\",\"code\":\"Global style → styles folder\\nComponent style → component folder\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"19d289af-3039-4bd2-9590-ecd8ddd27fdc","type":"divider","props":{},"children":[]},{"id":"87e146dc-0362-4bf8-9827-3e431c042893","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Import Global SCSS","styles":{}}],"children":[]},{"id":"3d1710b3-8a9d-45e9-9691-c0707a3310e7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/main.tsx","styles":{"code":true}}],"children":[]},{"id":"6738ce6e-ae6e-4974-a626-c57ea5ec444c","type":"procode","props":{"code":"import { StrictMode } from \"react\"\nimport { createRoot } from \"react-dom/client\"\nimport App from \"./App\"\nimport \"./styles/globals.scss\"\n\ncreateRoot(document.getElementById(\"root\")!).render(\n \n \n \n)\n","language":"tsx","filename":"","files":"[{\"id\":\"lht8gmm3g\",\"name\":\"code\",\"code\":\"import { StrictMode } from \\\"react\\\"\\nimport { createRoot } from \\\"react-dom/client\\\"\\nimport App from \\\"./App\\\"\\nimport \\\"./styles/globals.scss\\\"\\n\\ncreateRoot(document.getElementById(\\\"root\\\")!).render(\\n \\n \\n \\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8d90dfd6-708d-4c77-8988-221f635c741b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/styles/globals.scss","styles":{"code":true}}],"children":[]},{"id":"898adc51-89f8-414a-85e3-c02017116608","type":"procode","props":{"code":"* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n background: #ffffff;\n color: #111111;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"goxjhpzvj\",\"name\":\"code\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: system-ui, sans-serif;\\n background: #ffffff;\\n color: #111111;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ae0f5e23-12cb-4769-9cd6-63e7fe2d7ead","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6c50eb17-72c2-44a9-a630-563bdf935ebc","type":"procode","props":{"code":"Import global SCSS once near the app root.\n","language":"txt","filename":"","files":"[{\"id\":\"d07zwu3vr\",\"name\":\"code\",\"code\":\"Import global SCSS once near the app root.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5f90dfd9-277d-4a50-838e-9d8f5917e307","type":"divider","props":{},"children":[]},{"id":"e192ecde-7f29-4ca6-ac05-d86da3ad4dbc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"SCSS Variables","styles":{}}],"children":[]},{"id":"cbeab65b-7482-4bd9-8e07-19618428365b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SCSS variables start with ","styles":{}},{"type":"text","text":"$","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"66232e2d-23c1-41c4-a1cd-dd9daebd9699","type":"procode","props":{"code":"$primary-color: #6d28d9;\n$text-color: #111111;\n$radius-lg: 16px;\n$spacing-md: 16px;\n\n.button {\n border-radius: $radius-lg;\n background-color: $primary-color;\n color: white;\n padding: $spacing-md;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"y4agu4rnl\",\"name\":\"code\",\"code\":\"$primary-color: #6d28d9;\\n$text-color: #111111;\\n$radius-lg: 16px;\\n$spacing-md: 16px;\\n\\n.button {\\n border-radius: $radius-lg;\\n background-color: $primary-color;\\n color: white;\\n padding: $spacing-md;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86a0e065-3cd1-438d-98bd-08c5153563e2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e298be97-02fb-4b03-a9eb-7e046bf2c9ea","type":"procode","props":{"code":"SCSS variable = reusable style value\n","language":"txt","filename":"","files":"[{\"id\":\"w4kwge1bd\",\"name\":\"code\",\"code\":\"SCSS variable = reusable style value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b3b2e72e-9c43-4db0-82a1-bd35038e950a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use variables for:","styles":{}}],"children":[]},{"id":"10dc9a50-b9f6-4f6f-85f3-3d78843534a8","type":"procode","props":{"code":"Colors\nSpacing\nBorder radius\nFont size\nBreakpoints\nShadows\nZ-index values\n","language":"txt","filename":"","files":"[{\"id\":\"g9ko96jnv\",\"name\":\"code\",\"code\":\"Colors\\nSpacing\\nBorder radius\\nFont size\\nBreakpoints\\nShadows\\nZ-index values\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8950bc35-b3c1-4366-a63b-864aa2126c70","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass variables begin with ","styles":{}},{"type":"text","text":"$","styles":{"code":true}},{"type":"text","text":", and Sass documentation describes them as a way to reduce repetition and reuse values throughout stylesheets.","styles":{}}],"children":[]},{"id":"3ea1fcec-55c3-4386-a9ed-c420a140bda9","type":"divider","props":{},"children":[]},{"id":"bb77deab-094c-4c06-ba10-39977c8bea3c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"SCSS Variables vs CSS Variables","styles":{}}],"children":[]},{"id":"072c5860-5e67-4ed9-9742-d6f9f3516c0f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SCSS variable:","styles":{}}],"children":[]},{"id":"88a8e51b-90c6-4a0d-972f-fe95740aa4cb","type":"procode","props":{"code":"$primary-color: #6d28d9;\n\n.button {\n background-color: $primary-color;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"xc6zomyvs\",\"name\":\"code\",\"code\":\"$primary-color: #6d28d9;\\n\\n.button {\\n background-color: $primary-color;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"10db3aa1-632c-4ed0-8dac-865784cfe721","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS variable:","styles":{}}],"children":[]},{"id":"e4213db1-6c3a-41d7-b75a-a9049e88b13a","type":"procode","props":{"code":":root {\n --primary-color: #6d28d9;\n}\n\n.button {\n background-color: var(--primary-color);\n}\n","language":"scss","filename":"","files":"[{\"id\":\"r7fk09qoe\",\"name\":\"code\",\"code\":\":root {\\n --primary-color: #6d28d9;\\n}\\n\\n.button {\\n background-color: var(--primary-color);\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6d0200b7-6c04-47fc-b85c-da40e28a2976","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Comparison:","styles":{}}],"children":[]},{"id":"9829f359-bb54-4019-8e6e-39c0b2c46c45","type":"procode","props":{"code":"SCSS Variables\n├── Start with $\n├── Compile away during build\n├── Not available in browser runtime\n└── Good for build-time design tokens\n\nCSS Variables\n├── Start with --\n├── Stay in final CSS\n├── Can change at runtime\n└── Good for themes and dark mode\n","language":"txt","filename":"","files":"[{\"id\":\"4w27owwqu\",\"name\":\"code\",\"code\":\"SCSS Variables\\n├── Start with $\\n├── Compile away during build\\n├── Not available in browser runtime\\n└── Good for build-time design tokens\\n\\nCSS Variables\\n├── Start with --\\n├── Stay in final CSS\\n├── Can change at runtime\\n└── Good for themes and dark mode\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f81e538f-819e-42d4-88b7-b42230731109","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"615babd4-f2dd-4c45-ac24-0ce013d7771d","type":"procode","props":{"code":"Need runtime theme change? Use CSS variables.\nNeed compile-time reusable value? Use SCSS variables.\n","language":"txt","filename":"","files":"[{\"id\":\"ox0voz28x\",\"name\":\"code\",\"code\":\"Need runtime theme change? Use CSS variables.\\nNeed compile-time reusable value? Use SCSS variables.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2336ade5-ffa9-4a91-a41c-ae5b7115ad47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass documentation explains that Sass variables are compiled away, while CSS variables remain in the CSS output and can change per element at runtime.","styles":{}}],"children":[]},{"id":"6d49c386-447b-4574-8a8f-7aa0aba013a4","type":"divider","props":{},"children":[]},{"id":"d6ef8aae-4a2a-47f7-884c-048c999a2072","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Nesting","styles":{}}],"children":[]},{"id":"863ba652-b707-4d54-8cbb-6a43d554567a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SCSS allows nesting selectors.","styles":{}}],"children":[]},{"id":"5b31b9e7-0e22-424b-8049-9d8681b7490b","type":"procode","props":{"code":".card {\n padding: 24px;\n border-radius: 16px;\n background: white;\n\n .title {\n font-size: 24px;\n font-weight: 700;\n }\n\n .description {\n color: #666666;\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"sewg22ksb\",\"name\":\"code\",\"code\":\".card {\\n padding: 24px;\\n border-radius: 16px;\\n background: white;\\n\\n .title {\\n font-size: 24px;\\n font-weight: 700;\\n }\\n\\n .description {\\n color: #666666;\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"62eec48d-e64d-447b-8caa-0cc2211ae2f1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Compiled idea:","styles":{}}],"children":[]},{"id":"d99ad7e1-4e04-47f5-9724-42b5c440694a","type":"procode","props":{"code":".card {\n padding: 24px;\n}\n\n.card .title {\n font-size: 24px;\n}\n\n.card .description {\n color: #666666;\n}\n","language":"css","filename":"","files":"[{\"id\":\"nbhw8g7fh\",\"name\":\"code\",\"code\":\".card {\\n padding: 24px;\\n}\\n\\n.card .title {\\n font-size: 24px;\\n}\\n\\n.card .description {\\n color: #666666;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e77437a0-87d3-4a53-b406-5127a7069c15","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"8213b3b1-7367-4e5a-873a-6816ec24230c","type":"procode","props":{"code":"Nesting lets child styles stay inside parent styles.\n","language":"txt","filename":"","files":"[{\"id\":\"s0s5r0gmb\",\"name\":\"code\",\"code\":\"Nesting lets child styles stay inside parent styles.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"844a168b-9db8-45c1-bda9-6410d4ccc643","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass nesting automatically combines the outer selector with the inner selector, so you do not need to repeat the same parent selector again and again.","styles":{}}],"children":[]},{"id":"db7bf8a1-adc3-4e8c-87ad-2913307fc1cd","type":"divider","props":{},"children":[]},{"id":"19f539f6-8e25-4889-9d1b-052b9be73839","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Parent Selector &","styles":{}}],"children":[]},{"id":"79530fc4-816f-44cc-ad27-6d3d53c520db","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"&","styles":{"code":true}},{"type":"text","text":" to reference the current selector.","styles":{}}],"children":[]},{"id":"112f6961-5c30-4cf4-a99c-03369c91f101","type":"procode","props":{"code":".button {\n background: black;\n color: white;\n\n &:hover {\n background: #333333;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"ohh8srk59\",\"name\":\"code\",\"code\":\".button {\\n background: black;\\n color: white;\\n\\n &:hover {\\n background: #333333;\\n }\\n\\n &:disabled {\\n cursor: not-allowed;\\n opacity: 0.5;\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c7fc4354-fd41-4c07-b13f-1f609d2b8d31","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"0d89bb3b-4191-410a-ae4d-765d4086cdb1","type":"procode","props":{"code":"&:hover\n└── .button:hover\n\n&:disabled\n└── .button:disabled\n","language":"txt","filename":"","files":"[{\"id\":\"x41lx0m13\",\"name\":\"code\",\"code\":\"&:hover\\n└── .button:hover\\n\\n&:disabled\\n└── .button:disabled\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9a7d40d8-87e4-4343-8ec4-55b6b3f3cbc7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"82f26de8-e7ee-4509-9d5b-5db469e16123","type":"procode","props":{"code":"& means current selector.\n","language":"txt","filename":"","files":"[{\"id\":\"aryc8spw8\",\"name\":\"code\",\"code\":\"& means current selector.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"84db9da4-b696-43c2-9046-9875deb01028","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good for:","styles":{}}],"children":[]},{"id":"f2dc0683-13ea-42b7-828a-8572220253d3","type":"procode","props":{"code":"Hover state\nFocus state\nDisabled state\nActive state\nModifier class\nPseudo-elements\n","language":"txt","filename":"","files":"[{\"id\":\"yhbssc4y7\",\"name\":\"code\",\"code\":\"Hover state\\nFocus state\\nDisabled state\\nActive state\\nModifier class\\nPseudo-elements\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6b91e885-1707-463e-9ea0-6922bc09a840","type":"divider","props":{},"children":[]},{"id":"a50138af-2f71-4d93-aff6-782fcc451a29","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Avoid Deep Nesting","styles":{}}],"children":[]},{"id":"5b4a9f8a-1b1d-4e9d-a28b-43fc43269746","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Bad:","styles":{}}],"children":[]},{"id":"7208c31a-f924-44fa-af60-de453d9b4239","type":"procode","props":{"code":".page {\n .section {\n .card {\n .content {\n .title {\n color: red;\n }\n }\n }\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"yl6vfvqbo\",\"name\":\"code\",\"code\":\".page {\\n .section {\\n .card {\\n .content {\\n .title {\\n color: red;\\n }\\n }\\n }\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c8947aeb-4a1a-4b05-8e39-3bfc968ce4f6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Problem:","styles":{}}],"children":[]},{"id":"b7d3b12e-8191-456d-a239-564ed761bbe9","type":"procode","props":{"code":"Too deeply nested\nHard to override\nHard to read\nCreates long selectors\n","language":"txt","filename":"","files":"[{\"id\":\"9xs7qjikx\",\"name\":\"code\",\"code\":\"Too deeply nested\\nHard to override\\nHard to read\\nCreates long selectors\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"82dea27d-00ae-4bbd-b32d-aaf787d9c2c1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better:","styles":{}}],"children":[]},{"id":"6a11fa49-9863-4876-8aa2-461827302880","type":"procode","props":{"code":".card {\n padding: 24px;\n}\n\n.cardTitle {\n color: red;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"fjbwd1ud7\",\"name\":\"code\",\"code\":\".card {\\n padding: 24px;\\n}\\n\\n.cardTitle {\\n color: red;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fbf60818-36c3-4106-9ee9-4214eaaa376f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"6d5ec1d5-baaf-4f6a-a4b0-e72513b4c759","type":"procode","props":{"code":"Keep nesting shallow.\nUsually 1–2 levels is enough.\n","language":"txt","filename":"","files":"[{\"id\":\"ajickf938\",\"name\":\"code\",\"code\":\"Keep nesting shallow.\\nUsually 1–2 levels is enough.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d9f98353-0e96-4394-9176-ad3d132d8a8c","type":"divider","props":{},"children":[]},{"id":"0ad17fde-39ef-4ec7-84dd-a49e229768f7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mixins","styles":{}}],"children":[]},{"id":"86a5fd70-c1fd-4349-9752-afa584486748","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A ","styles":{}},{"type":"text","text":"mixin","styles":{"bold":true}},{"type":"text","text":" is reusable SCSS code.","styles":{}}],"children":[]},{"id":"e3ae54bc-7e52-4329-9075-f442dd7ffd2c","type":"procode","props":{"code":"@mixin flex-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.box {\n @include flex-center;\n height: 200px;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"3a5miau6p\",\"name\":\"code\",\"code\":\"@mixin flex-center {\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.box {\\n @include flex-center;\\n height: 200px;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ff623b5d-0327-4a99-9837-61f64e44e556","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"9d434e3a-3b1d-406a-bb18-904382413f32","type":"procode","props":{"code":"mixin = reusable CSS block\n","language":"txt","filename":"","files":"[{\"id\":\"cfhb0626j\",\"name\":\"code\",\"code\":\"mixin = reusable CSS block\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"19b0370f-cb8e-4462-b82a-9c13ee5ce853","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use mixins for repeated patterns:","styles":{}}],"children":[]},{"id":"5b2c9dfd-f6ff-40ca-9bca-7e38258553b5","type":"procode","props":{"code":"Flex center\nMedia queries\nButton reset\nText truncate\nResponsive layout\nVisually hidden\n","language":"txt","filename":"","files":"[{\"id\":\"mcq1eg28d\",\"name\":\"code\",\"code\":\"Flex center\\nMedia queries\\nButton reset\\nText truncate\\nResponsive layout\\nVisually hidden\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8fefa06c-62cd-4b1d-948d-8a4720f22278","type":"divider","props":{},"children":[]},{"id":"040192dd-b024-45f5-a275-82feb10fc0f4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mixin with Parameter","styles":{}}],"children":[]},{"id":"b96e01fb-1a8b-4c15-bb09-4773d44067c1","type":"procode","props":{"code":"@mixin button($bg, $color) {\n border: 0;\n border-radius: 999px;\n background: $bg;\n color: $color;\n padding: 12px 20px;\n font-weight: 600;\n}\n\n.primaryButton {\n @include button(#111111, #ffffff);\n}\n\n.secondaryButton {\n @include button(#f3f4f6, #111111);\n}\n","language":"scss","filename":"","files":"[{\"id\":\"ot8a4kl19\",\"name\":\"code\",\"code\":\"@mixin button($bg, $color) {\\n border: 0;\\n border-radius: 999px;\\n background: $bg;\\n color: $color;\\n padding: 12px 20px;\\n font-weight: 600;\\n}\\n\\n.primaryButton {\\n @include button(#111111, #ffffff);\\n}\\n\\n.secondaryButton {\\n @include button(#f3f4f6, #111111);\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6bf69be2-dead-43a6-8322-b7b68329aff5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ae2f2757-d88f-4cff-b5dd-e9f1b278dc70","type":"procode","props":{"code":"Mixin parameter makes reusable styles flexible.\n","language":"txt","filename":"","files":"[{\"id\":\"6x2uk69ew\",\"name\":\"code\",\"code\":\"Mixin parameter makes reusable styles flexible.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"20afb78b-d423-43ba-85c5-c328201c9bd4","type":"divider","props":{},"children":[]},{"id":"c0bfe205-9f01-4066-a16b-72e9ca566a31","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Partials","styles":{}}],"children":[]},{"id":"c601294f-9ae9-478e-bc5d-9e111df3840b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A partial is an SCSS file that starts with ","styles":{}},{"type":"text","text":"_","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"050decb5-dee4-4b45-b7c9-f565e32d8861","type":"procode","props":{"code":"_variables.scss\n_mixins.scss\n_reset.scss\n","language":"txt","filename":"","files":"[{\"id\":\"l5q6p66jc\",\"name\":\"code\",\"code\":\"_variables.scss\\n_mixins.scss\\n_reset.scss\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ab77d077-b4a5-4480-a5b6-dbbd237361e4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"12eaea89-8f44-491d-a684-50b922ae5c86","type":"procode","props":{"code":"src/styles/\n├── _variables.scss\n├── _mixins.scss\n└── globals.scss\n","language":"txt","filename":"","files":"[{\"id\":\"010elmn7j\",\"name\":\"code\",\"code\":\"src/styles/\\n├── _variables.scss\\n├── _mixins.scss\\n└── globals.scss\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8e434519-5f08-421d-a7cd-81505a53b2e7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"2bf1c10e-f0d7-438a-94d3-1fbfb2d661a7","type":"procode","props":{"code":"Partial = helper SCSS file\n","language":"txt","filename":"","files":"[{\"id\":\"ksib0bogf\",\"name\":\"code\",\"code\":\"Partial = helper SCSS file\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f1f29176-7913-46e4-a107-8bf3e7dee331","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass documentation says partial files begin with ","styles":{}},{"type":"text","text":"_","styles":{"code":true}},{"type":"text","text":", such as ","styles":{}},{"type":"text","text":"_code.scss","styles":{"code":true}},{"type":"text","text":", and are meant to be loaded as modules rather than compiled on their own.","styles":{}}],"children":[]},{"id":"52dbc7be-ab33-45dc-841e-ccee6b11f251","type":"divider","props":{},"children":[]},{"id":"ea6eafe3-5445-4e2b-bda2-16ca60bf6bc4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"@use","styles":{}}],"children":[]},{"id":"5c5c9664-991f-4c89-96a4-5cd909e3e613","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"@use","styles":{"code":true}},{"type":"text","text":" to load another SCSS file.","styles":{}}],"children":[]},{"id":"8186cb37-3501-4d1c-a7bb-f484bfc516c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/styles/_variables.scss","styles":{"code":true}}],"children":[]},{"id":"5798e9cb-4ebc-4dc0-9fc5-c4685a7287bb","type":"procode","props":{"code":"$primary-color: #6d28d9;\n$radius-lg: 16px;\n","language":"scss","filename":"","files":"[{\"id\":\"7ch4sxczo\",\"name\":\"code\",\"code\":\"$primary-color: #6d28d9;\\n$radius-lg: 16px;\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b02d4606-b9d2-4137-a3b8-0306d894faef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/styles/globals.scss","styles":{"code":true}}],"children":[]},{"id":"fcf8210c-79dc-4162-bd73-2c2a5d894845","type":"procode","props":{"code":"@use \"./variables\";\n\n.button {\n background: variables.$primary-color;\n border-radius: variables.$radius-lg;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"kaps3gh22\",\"name\":\"code\",\"code\":\"@use \\\"./variables\\\";\\n\\n.button {\\n background: variables.$primary-color;\\n border-radius: variables.$radius-lg;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"336cd2cf-9c77-4d91-9745-76ae8918570c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"860dd210-0273-4c31-bd1d-b0de71799b96","type":"procode","props":{"code":"@use loads variables, mixins, and functions from another SCSS file.\n","language":"txt","filename":"","files":"[{\"id\":\"30v8kcpm9\",\"name\":\"code\",\"code\":\"@use loads variables, mixins, and functions from another SCSS file.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bc5de62d-3581-4683-9410-521e04f0df29","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass documentation says ","styles":{}},{"type":"text","text":"@use","styles":{"code":true}},{"type":"text","text":" loads variables, mixins, and functions from other stylesheets as modules, and styles loaded this way are included only once in the compiled CSS output.","styles":{}}],"children":[]},{"id":"6c84ec0f-7bad-4d3e-a4e2-6ec0f52d1823","type":"divider","props":{},"children":[]},{"id":"41921802-c725-4599-b2eb-17c852552161","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"@use with Namespace","styles":{}}],"children":[]},{"id":"9d5e81b9-088b-41b2-a0fe-1e2cd103d736","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"By default, the namespace comes from the file name.","styles":{}}],"children":[]},{"id":"e32f66dc-f5a6-48ff-80ba-23b96452c349","type":"procode","props":{"code":"@use \"./variables\";\n\n.button {\n color: variables.$primary-color;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"wxz2y905h\",\"name\":\"code\",\"code\":\"@use \\\"./variables\\\";\\n\\n.button {\\n color: variables.$primary-color;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86bedc7d-5396-43f1-a749-36f06d5af34d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"You can rename the namespace:","styles":{}}],"children":[]},{"id":"76b27a43-29e9-4976-8b65-0ffffde1a4ba","type":"procode","props":{"code":"@use \"./variables\" as v;\n\n.button {\n color: v.$primary-color;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"0kp3x0hxr\",\"name\":\"code\",\"code\":\"@use \\\"./variables\\\" as v;\\n\\n.button {\\n color: v.$primary-color;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"03b90b4d-d73d-438b-a062-0ba1d51a537c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c9896b69-6907-437e-a1be-c4c930b98fad","type":"procode","props":{"code":"Namespace helps avoid variable name conflicts.\n","language":"txt","filename":"","files":"[{\"id\":\"klotnkc6x\",\"name\":\"code\",\"code\":\"Namespace helps avoid variable name conflicts.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"19affaf6-0cab-4c17-82a5-f3887ca2ff7e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass documentation explains that ","styles":{}},{"type":"text","text":"@use \"\" as ","styles":{"code":true}},{"type":"text","text":" lets you choose a custom namespace for a module.","styles":{}}],"children":[]},{"id":"f5118f67-20cc-451a-bd8d-1669fdc62566","type":"divider","props":{},"children":[]},{"id":"e5a57889-5f03-4886-9aa0-5523947f3f89","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"SCSS Module in React","styles":{}}],"children":[]},{"id":"a5bba8a4-9c3d-44f7-b240-84a6b43664ac","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":".module.scss","styles":{"code":true}},{"type":"text","text":" for component-scoped styles.","styles":{}}],"children":[]},{"id":"aa1b7635-c4da-42d2-b86b-4bed690f8f2c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button.module.scss","styles":{"code":true}}],"children":[]},{"id":"6b5e4dba-0008-4402-8262-f1ecf41295ab","type":"procode","props":{"code":".button {\n border: 0;\n border-radius: 999px;\n background: #111111;\n color: #ffffff;\n padding: 12px 20px;\n font-weight: 600;\n cursor: pointer;\n\n &:hover {\n background: #333333;\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"d0lci55ow\",\"name\":\"code\",\"code\":\".button {\\n border: 0;\\n border-radius: 999px;\\n background: #111111;\\n color: #ffffff;\\n padding: 12px 20px;\\n font-weight: 600;\\n cursor: pointer;\\n\\n &:hover {\\n background: #333333;\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"df381633-15f0-456b-befd-aa560bbe6bb0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button.tsx","styles":{"code":true}}],"children":[]},{"id":"b8f0a86e-a5af-405a-a527-ac5d8c25b5b9","type":"procode","props":{"code":"import styles from \"./Button.module.scss\"\n\nexport function Button() {\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"2ua3rmfbb\",\"name\":\"code\",\"code\":\"import styles from \\\"./Button.module.scss\\\"\\n\\nexport function Button() {\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d3b04512-baca-4a4a-9651-ce8915632759","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c35300ac-e01e-41bb-84fb-9da2c9854c3a","type":"procode","props":{"code":".module.scss = scoped SCSS for one component\n","language":"txt","filename":"","files":"[{\"id\":\"1ayjwj6to\",\"name\":\"code\",\"code\":\".module.scss = scoped SCSS for one component\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bdc189f3-110c-42f2-bcb1-d008777ab421","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Vite supports CSS Modules and says preprocessor modules can be created by adding ","styles":{}},{"type":"text","text":".module","styles":{"code":true}},{"type":"text","text":" before the preprocessor extension, for example ","styles":{}},{"type":"text","text":"style.module.scss","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"77dc88ee-d801-4d8a-8e54-f62ab4eeba7e","type":"divider","props":{},"children":[]},{"id":"11190458-df4e-4d39-a514-f08e2c136ef1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Global SCSS vs SCSS Module","styles":{}}],"children":[]},{"id":"d268d11c-1337-4c41-82c6-f436cbc4fe69","type":"procode","props":{"code":"Global SCSS\n├── Applies to the whole app\n├── Good for body, reset, variables, base styles\n├── Imported once in main.tsx\n└── Can accidentally affect many components\n\nSCSS Module\n├── Scoped to one component\n├── Good for component styling\n├── Imported inside component file\n└── Reduces class name conflict\n","language":"txt","filename":"","files":"[{\"id\":\"a8plm3mzu\",\"name\":\"code\",\"code\":\"Global SCSS\\n├── Applies to the whole app\\n├── Good for body, reset, variables, base styles\\n├── Imported once in main.tsx\\n└── Can accidentally affect many components\\n\\nSCSS Module\\n├── Scoped to one component\\n├── Good for component styling\\n├── Imported inside component file\\n└── Reduces class name conflict\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"681ffb58-5a78-4179-b0c1-74b45cb75965","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"7d74189b-61a4-4f8a-bd92-8e9fa7004bea","type":"procode","props":{"code":"Global style → globals.scss\nComponent style → Component.module.scss\n","language":"txt","filename":"","files":"[{\"id\":\"ef3uiws5m\",\"name\":\"code\",\"code\":\"Global style → globals.scss\\nComponent style → Component.module.scss\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9b125bcf-20d5-4c86-afa2-71920986e996","type":"divider","props":{},"children":[]},{"id":"55433a2a-cd22-4a5c-9da3-52632aff7681","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Button Component with SCSS Module","styles":{}}],"children":[]},{"id":"ff590d08-8a6d-4d05-b96a-80ab7eec12bf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button.module.scss","styles":{"code":true}}],"children":[]},{"id":"1fda06e7-7c8a-490d-8100-c985f622f0ac","type":"procode","props":{"code":".button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 999px;\n padding: 12px 20px;\n background: #111111;\n color: #ffffff;\n font-weight: 600;\n transition: background-color 200ms ease, transform 200ms ease;\n\n &:hover {\n background: #333333;\n }\n\n &:active {\n transform: scale(0.98);\n }\n}\n\n.fullWidth {\n width: 100%;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"7xz7e4lq6\",\"name\":\"code\",\"code\":\".button {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n border: 0;\\n border-radius: 999px;\\n padding: 12px 20px;\\n background: #111111;\\n color: #ffffff;\\n font-weight: 600;\\n transition: background-color 200ms ease, transform 200ms ease;\\n\\n &:hover {\\n background: #333333;\\n }\\n\\n &:active {\\n transform: scale(0.98);\\n }\\n}\\n\\n.fullWidth {\\n width: 100%;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3030fba5-b27a-43c6-b407-3269f9dac002","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button.tsx","styles":{"code":true}}],"children":[]},{"id":"65b228f5-5f97-476d-8527-474c925b0906","type":"procode","props":{"code":"import styles from \"./Button.module.scss\"\n\ntype ButtonProps = {\n children: React.ReactNode\n fullWidth?: boolean\n}\n\nexport function Button({\n children,\n fullWidth = false,\n}: ButtonProps) {\n return (\n \n {children}\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"cgpg9qz5s\",\"name\":\"code\",\"code\":\"import styles from \\\"./Button.module.scss\\\"\\n\\ntype ButtonProps = {\\n children: React.ReactNode\\n fullWidth?: boolean\\n}\\n\\nexport function Button({\\n children,\\n fullWidth = false,\\n}: ButtonProps) {\\n return (\\n \\n {children}\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cac018bb-3219-4951-8467-33da3a27107e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"11001b33-0fe1-47db-a556-15c7cb8474cc","type":"procode","props":{"code":"SCSS Module styles the component.\nReact props control style variations.\n","language":"txt","filename":"","files":"[{\"id\":\"gqo741orz\",\"name\":\"code\",\"code\":\"SCSS Module styles the component.\\nReact props control style variations.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4ff86b17-d67b-4a99-836f-7a68199f98ec","type":"divider","props":{},"children":[]},{"id":"59127369-a496-4a01-90d2-da7d0307f7b9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Using clsx with SCSS Module","styles":{}}],"children":[]},{"id":"0b322932-f2ac-4c8c-9227-f3f0a232717c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Install:","styles":{}}],"children":[]},{"id":"9647cdb5-447e-4f0c-b0ce-a9fb771a5630","type":"procode","props":{"code":"pnpm add clsx\n","language":"bash","filename":"","files":"[{\"id\":\"5wprb4o38\",\"name\":\"code\",\"code\":\"pnpm add clsx\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3f341543-6e20-4c03-9fb3-69bf4760eaed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Component:","styles":{}}],"children":[]},{"id":"11dd3662-d8a4-4a52-ae68-a487b0b0c596","type":"procode","props":{"code":"import clsx from \"clsx\"\nimport styles from \"./Button.module.scss\"\n\ntype ButtonProps = {\n children: React.ReactNode\n variant?: \"primary\" | \"secondary\"\n fullWidth?: boolean\n}\n\nexport function Button({\n children,\n variant = \"primary\",\n fullWidth = false,\n}: ButtonProps) {\n return (\n \n {children}\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"uyae48mz8\",\"name\":\"code\",\"code\":\"import clsx from \\\"clsx\\\"\\nimport styles from \\\"./Button.module.scss\\\"\\n\\ntype ButtonProps = {\\n children: React.ReactNode\\n variant?: \\\"primary\\\" | \\\"secondary\\\"\\n fullWidth?: boolean\\n}\\n\\nexport function Button({\\n children,\\n variant = \\\"primary\\\",\\n fullWidth = false,\\n}: ButtonProps) {\\n return (\\n \\n {children}\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"27bfed12-9e14-4c47-a719-10ebf252d98f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SCSS:","styles":{}}],"children":[]},{"id":"945969ac-2ce6-4fe4-830b-82d975a5e16a","type":"procode","props":{"code":".button {\n border: 0;\n border-radius: 999px;\n padding: 12px 20px;\n font-weight: 600;\n}\n\n.primary {\n background: #111111;\n color: white;\n}\n\n.secondary {\n background: #f3f4f6;\n color: #111111;\n}\n\n.fullWidth {\n width: 100%;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"cke76naox\",\"name\":\"code\",\"code\":\".button {\\n border: 0;\\n border-radius: 999px;\\n padding: 12px 20px;\\n font-weight: 600;\\n}\\n\\n.primary {\\n background: #111111;\\n color: white;\\n}\\n\\n.secondary {\\n background: #f3f4f6;\\n color: #111111;\\n}\\n\\n.fullWidth {\\n width: 100%;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bcc08677-ab35-4a10-a129-a4c1a0dce86f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"240ac64f-6089-418c-9638-0a689e2c84b3","type":"procode","props":{"code":"clsx makes conditional SCSS module classes cleaner.\n","language":"txt","filename":"","files":"[{\"id\":\"fkg2dobtx\",\"name\":\"code\",\"code\":\"clsx makes conditional SCSS module classes cleaner.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"52e0db9b-301e-4fdc-a16b-e256a3fee7b2","type":"divider","props":{},"children":[]},{"id":"d271a757-a6d3-4a4b-ad06-636aa77b8aa2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Responsive SCSS","styles":{}}],"children":[]},{"id":"7ae64abf-9add-4e37-bda5-e21b3c99efb3","type":"procode","props":{"code":".cardGrid {\n display: grid;\n gap: 16px;\n grid-template-columns: 1fr;\n\n @media (min-width: 768px) {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"a2f701y8v\",\"name\":\"code\",\"code\":\".cardGrid {\\n display: grid;\\n gap: 16px;\\n grid-template-columns: 1fr;\\n\\n @media (min-width: 768px) {\\n grid-template-columns: repeat(3, 1fr);\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4c094dcb-b18e-4c5d-980a-8d8221876451","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage:","styles":{}}],"children":[]},{"id":"cc7adee9-90d9-4078-99f6-cad222a5a3f0","type":"procode","props":{"code":"import styles from \"./CardGrid.module.scss\"\n\nexport function CardGrid() {\n return (\n

Card 1

Card 2

Card 3

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"fgbs9sqoe\",\"name\":\"code\",\"code\":\"import styles from \\\"./CardGrid.module.scss\\\"\\n\\nexport function CardGrid() {\\n return (\\n

\\n

Card 1

\\n

Card 2

\\n

Card 3

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ba01f94c-e158-4b8e-996c-58b34f95dae4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"de3fb0ca-47e0-48b2-ac18-43eef9309feb","type":"procode","props":{"code":"SCSS can place media queries inside the related class.\n","language":"txt","filename":"","files":"[{\"id\":\"1ih4nna6k\",\"name\":\"code\",\"code\":\"SCSS can place media queries inside the related class.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"38f8e0b7-c1d8-4cef-92d6-eaabf27c0c5b","type":"divider","props":{},"children":[]},{"id":"d8e785b1-94eb-4eeb-a041-2050d8d3328a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Mixin for Responsive Design","styles":{}}],"children":[]},{"id":"c1101192-6857-4978-93aa-bda5952a70ca","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"_mixins.scss","styles":{"code":true}}],"children":[]},{"id":"73131257-59c2-4275-bd57-5a7333dadf6d","type":"procode","props":{"code":"@mixin md {\n @media (min-width: 768px) {\n @content;\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"kia8rowqg\",\"name\":\"code\",\"code\":\"@mixin md {\\n @media (min-width: 768px) {\\n @content;\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"41b604a3-f250-45af-aa5d-c1704777c326","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CardGrid.module.scss","styles":{"code":true}}],"children":[]},{"id":"35322409-0f1f-4aae-996b-5a247b4f4812","type":"procode","props":{"code":"@use \"../../styles/mixins\";\n\n.cardGrid {\n display: grid;\n gap: 16px;\n grid-template-columns: 1fr;\n\n @include mixins.md {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"1l7hqs9be\",\"name\":\"code\",\"code\":\"@use \\\"../../styles/mixins\\\";\\n\\n.cardGrid {\\n display: grid;\\n gap: 16px;\\n grid-template-columns: 1fr;\\n\\n @include mixins.md {\\n grid-template-columns: repeat(3, 1fr);\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30152d51-9df2-4049-8e2a-e09e610296b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6c612bf9-d4d9-499e-b627-ab80c2c104fb","type":"procode","props":{"code":"Responsive mixin keeps media queries reusable.\n","language":"txt","filename":"","files":"[{\"id\":\"95eqyiadi\",\"name\":\"code\",\"code\":\"Responsive mixin keeps media queries reusable.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d36c72ba-73b7-4297-8c17-12ea5ccf61a2","type":"divider","props":{},"children":[]},{"id":"3bf1eeef-7839-4b0a-aa1c-b11a961437dc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"SCSS with BEM Naming","styles":{}}],"children":[]},{"id":"597bb3f9-52f7-42fd-8423-c57f8517c5dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SCSS works well with BEM-style class names.","styles":{}}],"children":[]},{"id":"3366a764-d26d-447d-9a0c-5cebc09206a8","type":"procode","props":{"code":".card {\n padding: 24px;\n border-radius: 16px;\n background: white;\n\n &__title {\n font-size: 24px;\n font-weight: 700;\n }\n\n &__description {\n color: #666666;\n }\n\n &--featured {\n border: 2px solid #6d28d9;\n }\n}\n","language":"scss","filename":"","files":"[{\"id\":\"2t5460g06\",\"name\":\"code\",\"code\":\".card {\\n padding: 24px;\\n border-radius: 16px;\\n background: white;\\n\\n &__title {\\n font-size: 24px;\\n font-weight: 700;\\n }\\n\\n &__description {\\n color: #666666;\\n }\\n\\n &--featured {\\n border: 2px solid #6d28d9;\\n }\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8d6455cc-e32c-44c0-8ae4-36c38634ed26","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Compiled idea:","styles":{}}],"children":[]},{"id":"44c92f6e-e28d-49ec-9fad-59f485590209","type":"procode","props":{"code":".card__title\n.card__description\n.card--featured\n","language":"txt","filename":"","files":"[{\"id\":\"e8jroqgfu\",\"name\":\"code\",\"code\":\".card__title\\n.card__description\\n.card--featured\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b587bbe2-a937-4666-8ac1-7ccc9ffadbff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"42e89ca3-a54a-4781-bf4c-35b08d54a107","type":"procode","props":{"code":"& can help create BEM class names.\n","language":"txt","filename":"","files":"[{\"id\":\"up1fz28od\",\"name\":\"code\",\"code\":\"& can help create BEM class names.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9aff70a3-5d71-4069-90dc-467bd5d69c26","type":"divider","props":{},"children":[]},{"id":"88c3d9cf-98a1-4d23-b16b-6a5cb939b329","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"SCSS with CSS Variables for Theme","styles":{}}],"children":[]},{"id":"6be90a86-12ca-4a11-81e9-24b0b3203024","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use SCSS for structure and CSS variables for runtime theme.","styles":{}}],"children":[]},{"id":"0b3a18ae-e193-4c9c-bbdd-6910c8ef2e64","type":"procode","props":{"code":":root {\n --background: #ffffff;\n --foreground: #111111;\n --primary: #6d28d9;\n}\n\n[data-theme=\"dark\"] {\n --background: #111111;\n --foreground: #ffffff;\n --primary: #a78bfa;\n}\n\nbody {\n background: var(--background);\n color: var(--foreground);\n}\n\n.button {\n background: var(--primary);\n color: white;\n}\n","language":"scss","filename":"","files":"[{\"id\":\"2kppg1lmc\",\"name\":\"code\",\"code\":\":root {\\n --background: #ffffff;\\n --foreground: #111111;\\n --primary: #6d28d9;\\n}\\n\\n[data-theme=\\\"dark\\\"] {\\n --background: #111111;\\n --foreground: #ffffff;\\n --primary: #a78bfa;\\n}\\n\\nbody {\\n background: var(--background);\\n color: var(--foreground);\\n}\\n\\n.button {\\n background: var(--primary);\\n color: white;\\n}\\n\",\"language\":\"scss\"}]","width":"100%","height":"auto"},"children":[]},{"id":"db56d840-84c0-45df-ac24-8ff964538492","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"92d763e6-e260-46ae-91ef-5e20e8679895","type":"procode","props":{"code":"SCSS organizes style.\nCSS variables handle runtime theme.\n","language":"txt","filename":"","files":"[{\"id\":\"cm20xljq0\",\"name\":\"code\",\"code\":\"SCSS organizes style.\\nCSS variables handle runtime theme.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"85def3bc-c2a5-4b4a-8e62-26a5eb506623","type":"divider","props":{},"children":[]},{"id":"807c9c3e-2ead-4166-afd1-0c2e7b3d2990","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"SCSS vs CSS","styles":{}}],"children":[]},{"id":"17f8eb31-e083-4556-86e1-9924deda5132","type":"procode","props":{"code":"CSS\n├── Native browser language\n├── No build step needed\n├── Good for simple styling\n└── Good when you want less tooling\n\nSCSS\n├── Needs build step\n├── Adds variables\n├── Adds nesting\n├── Adds mixins\n├── Adds partials/modules\n└── Good for larger organized styling\n","language":"txt","filename":"","files":"[{\"id\":\"7h0uum2kx\",\"name\":\"code\",\"code\":\"CSS\\n├── Native browser language\\n├── No build step needed\\n├── Good for simple styling\\n└── Good when you want less tooling\\n\\nSCSS\\n├── Needs build step\\n├── Adds variables\\n├── Adds nesting\\n├── Adds mixins\\n├── Adds partials/modules\\n└── Good for larger organized styling\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f1cdb93-1b18-4e54-890a-ed2244dc40b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"9b1e50a9-b372-4bcf-b2aa-dc5ae52ba765","type":"procode","props":{"code":"Small simple style → CSS is enough\nLarger organized style → SCSS can help\n","language":"txt","filename":"","files":"[{\"id\":\"le1i58enl\",\"name\":\"code\",\"code\":\"Small simple style → CSS is enough\\nLarger organized style → SCSS can help\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9ca50fdb-8706-4812-b92b-0ab9fdc1035a","type":"divider","props":{},"children":[]},{"id":"4de167c4-6695-4127-bd7e-9aff60e25c1a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"SCSS vs Tailwind CSS","styles":{}}],"children":[]},{"id":"1b1f0913-932e-4ac0-b9c8-60dd6d01d114","type":"procode","props":{"code":"SCSS\n├── Write custom CSS classes\n├── Good for complex custom styling\n├── Good for animations\n├── Good for component modules\n└── More CSS-file based\n\nTailwind CSS\n├── Use utility classes in className\n├── Faster for layout and spacing\n├── Good for consistent design systems\n├── Less custom CSS\n└── More JSX-class based\n","language":"txt","filename":"","files":"[{\"id\":\"a4o0lp147\",\"name\":\"code\",\"code\":\"SCSS\\n├── Write custom CSS classes\\n├── Good for complex custom styling\\n├── Good for animations\\n├── Good for component modules\\n└── More CSS-file based\\n\\nTailwind CSS\\n├── Use utility classes in className\\n├── Faster for layout and spacing\\n├── Good for consistent design systems\\n├── Less custom CSS\\n└── More JSX-class based\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"898331ee-dac5-4e8e-9604-df9cc07f686c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"d8e6c90e-5c29-4a3a-9534-5c75c468be69","type":"procode","props":{"code":"Use Tailwind for fast utility styling.\nUse SCSS when custom CSS is clearer.\n","language":"txt","filename":"","files":"[{\"id\":\"egtmg25f6\",\"name\":\"code\",\"code\":\"Use Tailwind for fast utility styling.\\nUse SCSS when custom CSS is clearer.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3170e827-f48e-44f5-ad7a-604c84f90f73","type":"divider","props":{},"children":[]},{"id":"345e0b9c-a3d8-4a2f-ac5f-703619c378c9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"SCSS vs CSS Modules","styles":{}}],"children":[]},{"id":"b6a95db4-7c73-4f7a-bf5c-334d5b8c5339","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SCSS and CSS Modules are different things, but they can work together.","styles":{}}],"children":[]},{"id":"2273210b-e57f-4493-b972-66e242221302","type":"procode","props":{"code":"SCSS\n└── CSS preprocessor language\n\nCSS Modules\n└── Scoped class-name system\n","language":"txt","filename":"","files":"[{\"id\":\"l7ovswiht\",\"name\":\"code\",\"code\":\"SCSS\\n└── CSS preprocessor language\\n\\nCSS Modules\\n└── Scoped class-name system\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"673a75d5-c032-4ae9-95a4-daa29ffa7675","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Together:","styles":{}}],"children":[]},{"id":"ba68f1a0-691b-4740-882f-b91494d93284","type":"procode","props":{"code":"Button.module.scss\n├── SCSS features\n└── scoped component classes\n","language":"txt","filename":"","files":"[{\"id\":\"l1d7tmkm6\",\"name\":\"code\",\"code\":\"Button.module.scss\\n├── SCSS features\\n└── scoped component classes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e33fb576-193b-4361-bc85-5bb3d9c1431f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"33f40768-9339-48ee-b582-35e9da40f5a3","type":"procode","props":{"code":".module.scss = SCSS + CSS Modules\n","language":"txt","filename":"","files":"[{\"id\":\"3u0y6ricp\",\"name\":\"code\",\"code\":\".module.scss = SCSS + CSS Modules\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f59bde73-47e8-4648-a922-ca1d77d3ccaf","type":"divider","props":{},"children":[]},{"id":"a2097cc5-0da2-4b88-a151-2a1d70777099","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Should You Use Sass / SCSS?","styles":{}}],"children":[]},{"id":"480bc962-b80c-4783-93e6-dccebb7278b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use SCSS when:","styles":{}}],"children":[]},{"id":"9dde8a63-64d8-4ea0-b4ac-db5824faaf83","type":"procode","props":{"code":"You want custom CSS\nYou want variables\nYou want nesting\nYou want mixins\nYou want reusable media queries\nYou want organized style files\nYou want scoped component styles\nYou write complex animations\nTailwind className becomes too long\n","language":"txt","filename":"","files":"[{\"id\":\"5r5ax7776\",\"name\":\"code\",\"code\":\"You want custom CSS\\nYou want variables\\nYou want nesting\\nYou want mixins\\nYou want reusable media queries\\nYou want organized style files\\nYou want scoped component styles\\nYou write complex animations\\nTailwind className becomes too long\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8f3d82ca-5ec8-44db-a1ff-cb5398d80b69","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good examples:","styles":{}}],"children":[]},{"id":"9bc5a94e-6022-46ee-b8e0-45cf38a5bbd2","type":"procode","props":{"code":"Buttons\nCards\nForms\nNavbar\nDashboard layout\nCustom animation\nResponsive component style\nLarge design system CSS\n","language":"txt","filename":"","files":"[{\"id\":\"gcjquprc1\",\"name\":\"code\",\"code\":\"Buttons\\nCards\\nForms\\nNavbar\\nDashboard layout\\nCustom animation\\nResponsive component style\\nLarge design system CSS\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c84dcdee-50c2-49f5-92ff-684924eb9cc5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"05bdd9e0-5dc1-4953-a25b-8bae0b0f5600","type":"procode","props":{"code":"SCSS is good when regular CSS becomes repetitive.\n","language":"txt","filename":"","files":"[{\"id\":\"nceyqc4cg\",\"name\":\"code\",\"code\":\"SCSS is good when regular CSS becomes repetitive.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a53d5ebb-5fad-4815-8c67-340d6dd56fec","type":"divider","props":{},"children":[]},{"id":"d096229f-938b-4949-89d5-4c041d1b7a42","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"When Not to Use Sass / SCSS?","styles":{}}],"children":[]},{"id":"d88b5685-f306-4a45-8c1a-d910c75304cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Avoid forcing SCSS when:","styles":{}}],"children":[]},{"id":"66010d9e-0e3e-4a6c-9620-38fe3aeeb672","type":"procode","props":{"code":"Plain CSS is enough\nTailwind already solves the styling\nYou only need a few small styles\nYou over-nest everything\nYou create too many global classes\nYou use SCSS variables for runtime themes\n","language":"txt","filename":"","files":"[{\"id\":\"gflsihyt5\",\"name\":\"code\",\"code\":\"Plain CSS is enough\\nTailwind already solves the styling\\nYou only need a few small styles\\nYou over-nest everything\\nYou create too many global classes\\nYou use SCSS variables for runtime themes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"18f8e492-3ba1-4923-a741-591367a38445","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better alternatives:","styles":{}}],"children":[]},{"id":"b691688d-5fef-4a82-9c1e-30b2a3cf8e3e","type":"procode","props":{"code":"Small style → CSS\nUtility layout → Tailwind\nRuntime theme → CSS variables\nScoped component style → CSS Modules or SCSS Modules\n","language":"txt","filename":"","files":"[{\"id\":\"d8z1w5bp6\",\"name\":\"code\",\"code\":\"Small style → CSS\\nUtility layout → Tailwind\\nRuntime theme → CSS variables\\nScoped component style → CSS Modules or SCSS Modules\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9c006dd4-d0fd-4f52-8512-48c884aa4c67","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7b514291-7e5a-43b6-866a-6f070ac6e181","type":"procode","props":{"code":"Use SCSS when it makes styling clearer, not just because it exists.\n","language":"txt","filename":"","files":"[{\"id\":\"b7ps39gsd\",\"name\":\"code\",\"code\":\"Use SCSS when it makes styling clearer, not just because it exists.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"78d48813-bfae-4db9-8cdf-76bcb78d5007","type":"divider","props":{},"children":[]},{"id":"70cd2177-bcef-4d3b-87cc-a092b669792b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"8d23b630-68c9-485b-90da-76933ab6d51f","type":"procode","props":{"code":"Mistake 1: Over-nesting selectors\nMistake 2: Using global SCSS for everything\nMistake 3: Forgetting to install sass\nMistake 4: Confusing .sass and .scss syntax\nMistake 5: Using @import instead of @use in modern Sass\nMistake 6: Using SCSS variables for runtime dark mode\nMistake 7: Creating too many unclear mixins\nMistake 8: Forgetting .module.scss for component-scoped styles\nMistake 9: Repeating the same colors instead of variables\nMistake 10: Making CSS harder to read than plain CSS\n","language":"txt","filename":"","files":"[{\"id\":\"796j0rsrz\",\"name\":\"code\",\"code\":\"Mistake 1: Over-nesting selectors\\nMistake 2: Using global SCSS for everything\\nMistake 3: Forgetting to install sass\\nMistake 4: Confusing .sass and .scss syntax\\nMistake 5: Using @import instead of @use in modern Sass\\nMistake 6: Using SCSS variables for runtime dark mode\\nMistake 7: Creating too many unclear mixins\\nMistake 8: Forgetting .module.scss for component-scoped styles\\nMistake 9: Repeating the same colors instead of variables\\nMistake 10: Making CSS harder to read than plain CSS\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2e37c60a-819e-44ed-b4f8-36b15c9cd716","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"215b9dba-1386-4218-b0d4-4cefdf07fcdf","type":"procode","props":{"code":"Keep nesting shallow.\nUse @use.\nUse variables for repeated values.\nUse CSS variables for runtime themes.\nUse .module.scss for component styles.\n","language":"txt","filename":"","files":"[{\"id\":\"pywrmz27l\",\"name\":\"code\",\"code\":\"Keep nesting shallow.\\nUse @use.\\nUse variables for repeated values.\\nUse CSS variables for runtime themes.\\nUse .module.scss for component styles.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4692a2f5-a1c3-4216-9713-84fa7f70ddf6","type":"divider","props":{},"children":[]},{"id":"d9f21ed7-30a2-4cc3-854a-805fdc915dd2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"3d84baaa-fd0c-47f4-803f-a94d40d43a80","type":"procode","props":{"code":"Professional Sass / SCSS Pattern\n├── Install sass\n├── Use .scss for React projects\n├── Import global SCSS once\n├── Keep globals.scss small\n├── Use .module.scss for component styles\n├── Use variables for repeated design values\n├── Use mixins for repeated patterns\n├── Use @use instead of old import-style organization\n├── Keep nesting shallow\n├── Use CSS variables for runtime themes\n├── Use clsx for conditional classes\n├── Split partials by responsibility\n├── Avoid one huge SCSS file\n└── Prefer readable CSS over clever SCSS\n","language":"txt","filename":"","files":"[{\"id\":\"wthpsixr9\",\"name\":\"code\",\"code\":\"Professional Sass / SCSS Pattern\\n├── Install sass\\n├── Use .scss for React projects\\n├── Import global SCSS once\\n├── Keep globals.scss small\\n├── Use .module.scss for component styles\\n├── Use variables for repeated design values\\n├── Use mixins for repeated patterns\\n├── Use @use instead of old import-style organization\\n├── Keep nesting shallow\\n├── Use CSS variables for runtime themes\\n├── Use clsx for conditional classes\\n├── Split partials by responsibility\\n├── Avoid one huge SCSS file\\n└── Prefer readable CSS over clever SCSS\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b62cf22e-3ca8-459f-938e-29f57b3b4867","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended structure:","styles":{}}],"children":[]},{"id":"d36233e6-df1b-4c7f-94df-21158aff86aa","type":"procode","props":{"code":"src/\n├── styles/\n│ ├── globals.scss\n│ ├── _variables.scss\n│ ├── _mixins.scss\n│ ├── _reset.scss\n│ └── _themes.scss\n│\n├── components/\n│ ├── Button/\n│ │ ├── Button.tsx\n│ │ └── Button.module.scss\n│ │\n│ └── Card/\n│ ├── Card.tsx\n│ └── Card.module.scss\n│\n└── main.tsx\n","language":"txt","filename":"","files":"[{\"id\":\"umzhsq674\",\"name\":\"code\",\"code\":\"src/\\n├── styles/\\n│ ├── globals.scss\\n│ ├── _variables.scss\\n│ ├── _mixins.scss\\n│ ├── _reset.scss\\n│ └── _themes.scss\\n│\\n├── components/\\n│ ├── Button/\\n│ │ ├── Button.tsx\\n│ │ └── Button.module.scss\\n│ │\\n│ └── Card/\\n│ ├── Card.tsx\\n│ └── Card.module.scss\\n│\\n└── main.tsx\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"28a20d1b-8e39-463d-b3ef-19d9981d6113","type":"divider","props":{},"children":[]},{"id":"58e35f16-60e5-4e9e-891f-32321ab43513","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"75784875-0968-4ac9-a31b-61d40c70239e","type":"procode","props":{"code":"SCSS = organized CSS with extra tools\n","language":"txt","filename":"","files":"[{\"id\":\"ib5vmsbrk\",\"name\":\"code\",\"code\":\"SCSS = organized CSS with extra tools\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3551165b-7fae-4300-a940-c1d0e728e81d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another simple version:","styles":{}}],"children":[]},{"id":"cbfbb49a-0f04-445a-a79b-02761753a9bc","type":"procode","props":{"code":"CSS\n└── browser reads it directly\n\nSCSS\n├── developer writes it\n├── build tool compiles it\n└── browser receives CSS\n","language":"txt","filename":"","files":"[{\"id\":\"ccsmfkm1e\",\"name\":\"code\",\"code\":\"CSS\\n└── browser reads it directly\\n\\nSCSS\\n├── developer writes it\\n├── build tool compiles it\\n└── browser receives CSS\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"13e84147-4067-4649-bde7-059cd47f9df5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Best rule:","styles":{}}],"children":[]},{"id":"773c002b-7bf2-48f5-8480-3f3f130fcdb2","type":"procode","props":{"code":"Use SCSS to reduce repetition and organize styling.\nDo not use SCSS to make CSS more complicated.\n","language":"txt","filename":"","files":"[{\"id\":\"5rezrscsi\",\"name\":\"code\",\"code\":\"Use SCSS to reduce repetition and organize styling.\\nDo not use SCSS to make CSS more complicated.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f53ca5b8-6739-4940-8f89-dc52b8ec264f","type":"divider","props":{},"children":[]},{"id":"090d3c60-73f2-4ca2-91dc-0102468ab1b6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"f5d78846-d955-4c40-849b-99b0d6baf127","type":"procode","props":{"code":"Sass / SCSS\n├── Is a CSS preprocessor\n├── Adds extra features to CSS\n├── Uses .scss or .sass files\n├── SCSS is closer to normal CSS\n├── Supports variables\n├── Supports nesting\n├── Supports parent selector &\n├── Supports mixins\n├── Supports partials\n├── Supports modules with @use\n├── Compiles into normal CSS\n├── Works in React Vite after installing sass\n├── Can be global with globals.scss\n├── Can be scoped with .module.scss\n└── Should be used carefully to keep CSS readable\n","language":"txt","filename":"","files":"[{\"id\":\"iig2ck5yf\",\"name\":\"code\",\"code\":\"Sass / SCSS\\n├── Is a CSS preprocessor\\n├── Adds extra features to CSS\\n├── Uses .scss or .sass files\\n├── SCSS is closer to normal CSS\\n├── Supports variables\\n├── Supports nesting\\n├── Supports parent selector &\\n├── Supports mixins\\n├── Supports partials\\n├── Supports modules with @use\\n├── Compiles into normal CSS\\n├── Works in React Vite after installing sass\\n├── Can be global with globals.scss\\n├── Can be scoped with .module.scss\\n└── Should be used carefully to keep CSS readable\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"137b8c92-dbb7-433e-b237-7df07b75d982","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Sass / SCSS is important because it helps organize larger CSS codebases. The professional rule is simple: ","styles":{}},{"type":"text","text":"use SCSS for reusable and organized custom styling, use ","styles":{"bold":true}},{"type":"text","text":".module.scss","styles":{"code":true}},{"type":"text","text":" for component styles, keep nesting shallow, and use CSS variables when values must change at runtime","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"4be574d9-5f97-404b-9208-27ca0eede75e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]