💄 Astro JS Sass Styling #
We see how to set up Astro JS Sass styling in this post. Although modern CSS now supports many of the features which developers looked to Sass or SCSS to provide in the past, many developers still appreciate Sass. Astro’s Framework agnosticism as regards to using React together with Svelte, Vue or something else is already well known. You will expect this support of all popular frameworks to extend from rendering to styling. Astro does not disappoint here. In this post, we see how you can use Sass to add not just global styles, but also scoped styles to your Astro and Svelte components. In fact, we can extend that to React by using SCSS modules for styling. To add polish, we look at setting up Stylelint to enforce a particular code style or even just to make sure your SCSS stays just how you like it!
🧱 Astro JS Sass Styling: What we’re Building #
Please enable JavaScript to watch the video 📼
Rather than build a new app, we have taken the demo app from our Astro JS Tutorial and converted styling to SCSS. In the tutorial, we used vanilla CSS and you will see there is not much to change to get Sass up and running. In this post, we just look at the main changes you need to make to your files (rather than provide a follow along tutorial). Let me know if you like this style, instead of building an app as you follow along. If you really do want to build something as you read along though, you can clone the Astro JS Tutorial and make changes, converting it to SCSS.
⚙️ Astro JS Sass Styling: Config #
We add the Sass package as well as Stylelint here, which we use later.
pnpm add -D sass stylelint stylelint-config-recommended-scss stylelint-config-standard
🗳 Poll #
🌍 Astro JS Sass Styling: Global Styles #
We will create a global styles file at src/styles/styles.scss. As
well as changing the syntax to make it more idiomatic Sass, we also import a couple of files:
1 @charset "UTF-8";23 @use 'fonts.scss';4 @use 'variables.scss';56 body {7 margin: variables.$spacing-0;8 background: hsl(9 variables.$colour-dark-hue variables.$colour-dark-saturation variables.$colour-dark-luminance10 );11 font-family: Roboto;12 text-align: center;13 }1415 h1 {16 font-size: 3.815rem;17 margin-bottom: variables.$spacing-12;18 }1920 /* TRUNCATED... */
We place the fonts in a separate file just to keep the global styles file cleaner. However, for
the variables, beyond style, placing variables in a separate file makes it easier to import them
when we want to use the variables in scoped styles within component files. Having a separate
variables file lets us import just the variables without needing to import the entire global
styles files in these cases. In line 1 we set the charset.
Variables and Fonts #
Here is the fonts file for completeness:
src/styles/fonts.scss — click to expand code.
1 /* roboto-regular - latin */2 @font-face {3 font-family: 'Roboto';4 font-style: normal;5 font-weight: 400;6 src: local(''), url('/fonts/roboto-v30-latin-regular.woff2') format('woff2');7 }89 /* roboto-700 - latin */10 @font-face {11 font-family: 'Roboto';12 font-style: normal;13 font-weight: 700;14 src: local(''), url('/fonts/roboto-v30-latin-700.woff2') format('woff2');15 }
And also the variables file:
src/styles/variables.scss — click to expand code.
1 /* colours */2 /* honey-yellow */3 $colour-brand-hue: 39;4 $colour-brand-saturation: 92%;5 $colour-brand-luminance: 57%;67 /* safety orange blaze orange */8 $colour-secondary-hue: 21;9 $colour-secondary-saturation: 89%;10 $colour-secondary-luminance: 52%;1112 /* moss green */13 $colour-alternative-hue: 84;14 $colour-alternative-saturation: 29%;15 $colour-alternative-luminance: 43%;1617 /* pine tree */18 $colour-dark-text-hue: 100;19 $colour-dark-text-saturation: 18%;20 $colour-dark-text-luminance: 13%;2122 /* old lace */23 $colour-light-text-hue: 50;24 $colour-light-text-saturation: 66%;25 $colour-light-text-luminance: 95%;2627 $colour-dark-hue: 206;28 $colour-dark-saturation: 46%;29 $colour-dark-luminance: 37%;3031 /* spacing */32 $spacing-px: 1px;33 $spacing-0: 0;34 $spacing-4: 1rem;35 $spacing-6: 1.5rem;36 $spacing-8: 2rem;37 $spacing-12: 3rem;38 $spacing-32: 8rem;
💅🏽 Scoped Styles in Astro and Svelte Components #
Next, let’s look at the home page to see Astro JS Sass style imports together with scoped styling in an Astro file.
1 ---2 import '~styles/styles.scss';3 import ReactVideo from '~components/Video.jsx';4 import SvelteVideo from '~components/Video.svelte';5 import { Content as MarkdownVideoContent } from '~content/video.md';6 ---78 <html lang="en-GB">9 <head>10 <meta charset="utf-8" />11 <link rel="icon" href="/favicon.png" />12 <meta name="viewport" content="width=device-width" />1314 <title>Rodney Lab Minimal Astro Example</title>15 </head>16 <body>17 <main class="container">18 <h1>Astro JS Tutorial Site</h1>19 <p>This demo is not endorsed by Ben Awad, just thought the video content was fitting!</p>20 <ReactVideo client:load />21 <SvelteVideo client:load />22 <section class="mdx-container">23 <MarkdownVideoContent />24 </section>25 </main>26 </body>27 </html>2829 <style lang="scss">30 @use '../styles/variables';3132 .container {33 display: flex;34 flex-direction: column;35 background: hsl(36 variables.$colour-dark-hue variables.$colour-dark-saturation37 variables.$colour-dark-luminance38 );39 color: hsl(40 variables.$colour-light-text-hue variables.$colour-light-text-saturation41 variables.$colour-light-text-luminance42 );43 padding: variables.$spacing-8 variables.$spacing-0 variables.$spacing-32;44 }4546 .container a {47 color: hsl(48 variables.$colour-secondary-hue variables.$colour-secondary-saturation49 variables.$colour-secondary-luminance50 );51 }5253 .mdx-container {54 display: flex;55 flex-direction: column;56 background: hsl(57 variables.$colour-alternative-hue variables.$colour-alternative-saturation58 variables.$colour-alternative-luminance59 );60 align-items: center;61 width: 100%;62 padding: variables.$spacing-8 variables.$spacing-0 variables.$spacing-12;63 color: hsl(64 variables.$colour-light-text-hue variables.$colour-light-text-saturation65 variables.$colour-light-text-luminance66 );67 }68 </style>
In line 2 we import the global Sass stylesheet. This is not really
that different to how we would import a CSS stylesheet. In fact, the only real difference is the change
in filename. Note that we have defined an alias ~styles as src/styles in the tsconfig.js file. This lets us use the shorthand which you
see in the code. You can see a more detailed explanation of this in the Astro JS tutorial.
We can add scoped styles using a <style> tag (just like with
vanilla CSS). We should remember, though, when using Sass to add a lang="scss" attribute to the style tag, as in line 43. Because we want to use variables defined in the src/styles/variables.scss within this style element, we can just import that file. We do that in line 44.
Astro JS Sass Styling: Svelte Component #
Scoped styles in a Svelte component work just like the Astro file we just looked at. Because this is a component, rather than a page or a layout, we do not import the global style sheet in the Svelte file. Since the component will be embedded in an Astro page, we can rely on the page or its template to ensure global styles are imported.
For completeness, here is the Svelte file. Notice that the container class does not collide with the container we used in the Astro component,
because of the scoping.
src/components/Video.svelte — click to expand code.
1 <script>2 let altColours = $state(false);3 </script>45 <section class={`container${altColours ? ' container-alt' : ''}`}>6 <h2>Svelte Component</h2>7 <div class="video-container">8 <iframe9 title="Trying Svelte for the Third Time"10 width="560"11 height="315"12 src="https://www.youtube-nocookie.com/embed/xgER1OutVvU"13 frameborder="0"14 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"15 allowfullscreen16 />17 </div>18 <button19 class={`button${altColours ? ' button-alt' : ''}`}20 onclick={() => {21 altColours = !altColours;22 }}><span class="screen-reader-text">Toggle colours</span></button23 >24 </section>2526 <style lang="scss">27 @use '../styles/variables';2829 .container {30 display: flex;31 flex-direction: column;32 background: hsl(variables.$colour-brand-hue variables.$colour-brand-saturation variables.$colour-brand-luminance);33 align-items: center;34 width: 100%;35 padding: variables.$spacing-8 variables.$spacing-0;36 color: hsl(variables.$colour-dark-text-hue variables.$colour-dark-text-saturation variables.$colour-dark-text-luminance);37 }3839 .container-alt {40 background: hsl(variables.$colour-secondary-hue variables.$colour-secondary-saturation variables.$colour-secondary-luminance);4142 color: hsl(variables.$colour-light-text-hue variables.$colour-light-text-saturation variables.$colour-light-text-luminance);43 }4445 .button {46 background: hsl(variables.$colour-secondary-hue variables.$colour-secondary-saturation variables.$colour-secondary-luminance);47 }4849 .button-alt {50 background: hsl(variables.$colour-brand-hue variables.$colour-brand-saturation variables.$colour-brand-luminance);51 }52 </style>
🧩 React Styled Components #
React in Astro does not have an out-of-the-box scoped styling solution as convenient as what we have seen for Svelte and Astro files. Having said that, it is still fairly easy to scope styles using SCSS modules. This involves defining styles in a side file (typically named like the component which uses it) then importing them into the component file. Let's have a closer look.
We have our React Video component defined in src/components/Video.jsx. Then we define its styles in Sass in src/components/Video.module.scss:
1 @use '../styles/variables';23 .container {4 display: flex;5 flex-direction: column;6 background: hsl(7 variables.$colour-secondary-hue variables.$colour-secondary-saturation8 variables.$colour-secondary-luminance9 );10 align-items: center;11 width: 100%;12 padding: variables.$spacing-8 variables.$spacing-0;13 color: hsl(14 variables.$colour-light-text-hue variables.$colour-light-text-saturation15 variables.$colour-light-text-luminance16 );17 }1819 .container-alt {20 background: hsl(21 variables.$colour-alternative-hue variables.$colour-alternative-saturation22 variables.$colour-alternative-luminance23 );24 }2526 .button {27 background: hsl(28 variables.$colour-alternative-hue variables.$colour-alternative-saturation29 variables.$colour-alternative-luminance30 );31 }3233 .button-alt {34 background: hsl(35 variables.$colour-secondary-hue variables.$colour-secondary-saturation36 variables.$colour-secondary-luminance37 );38 }
Notice, once more, we import the variables for use in the local Sass code. Then, we import all the
styles as a styles object in the React file. The actual scoped class
names are defined in the JavaScript fields which we import. Remembering they are encoded in the JavaScript,
we use them in the React className attributes:
1 import styles from '~components/Video.module.scss';2 import { useState } from 'react';34 export const ReactExample = function ReactExample() {5 const [altColours, setAltColours] = useState(false);67 return (8 <section className={`${styles.container}${altColours ? ` ${styles['container-alt']}` : ''}`}>9 <h2>Example React Component</h2>10 <div className="video-container">11 <iframe12 width="560"13 height="315"14 src="https://www.youtube-nocookie.com/embed/PJ0QSJpJn2U"15 title="Should you Stop Using React"16 frameBorder="0"17 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"18 allowFullScreen19 />20 </div>21 <button22 className={`${styles.button}${altColours ? ` ${styles['button-alt']}` : ''}`}23 onClick={() => {24 setAltColours(!altColours);25 }}26 >27 <span className="screen-reader-text">Toggle colours</span>28 </button>29 </section>30 );31 };3233 export default ReactExample;
In line 1, we import the styles from the module file. Our style
module uses the container class. In line 8 we attach the scoped class
to the <section> element. We access it via styles.container. You can also add scoped class styles where the styles are attached to a kebab-case class (for
example, button-alt). We see this in action where we define styles
for the container-alt class in line 13 of src/components/Video.scss. Our code uses the JavaScript object accessor bracket notation , quoted notation for this kebab-case class in our React component. So in this case it is styles['container-alt']. We see the concrete use of this in line 8.
👼🏽 Astro JS Sass Styling: Stylelint #
Stylelint is a great tool for enforcing code style in your app styles helpful both when working in a team and on your own personal projects. You can easily build Stylelint checks into your continuous integration process.
First, create a .stylelintrc.json config file:
1 {2 "extends": "stylelint-config-recommended-scss",3 "rules": {4 "color-named": "never",5 "font-family-name-quotes": "always-where-required",6 "font-weight-notation": "named-where-possible",7 "function-url-no-scheme-relative": true,8 "function-url-quotes": "always",9 "value-keyword-case": "lower",10 "unit-disallowed-list": [],11 "no-descending-specificity": true,12 "no-duplicate-selectors": true,13 "font-family-no-missing-generic-family-keyword": null,14 "property-no-unknown": [15 true,16 {17 "ignoreProperties": ["/^lost-/"]18 }19 ],20 "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }]21 },22 "ignoreFiles": ["node_modules/*"],23 "defaultSeverity": "error",24 "customSyntax": "postcss-html"25 }
Feel free to customize this to your own tastes. See stylelint docs for details.
Next, we will add a lint script to package.json:
1 {2 "name": "astro-js-sass-styling",3 "version": "0.0.1",4 "private": true,5 "scripts": {6 "dev": "astro dev",7 "start": "astro dev",8 "build": "astro build",9 "preview": "astro preview",10 "format": "prettier --write --plugin=prettier-plugin-astro .",11 "lint:scss": "stylelint "src/**/*.{astro,scss,svelte}"",12 "prettier:check": "prettier --check --plugin=prettier-plugin-astro ."13 },14 }
We define the new script in line 11. Here we set Stylelint to
check .astro, .scss and .svelte files. To run the script, in the Terminal type:
pnpm lint:scss
You can add this into existing Husky configuration. If you want to set this up, have a look at the post on 7 Tools to Streamline your CI Workflow.
🙌🏽 Astro JS Sass Styling: Wrapping Up #
In this post, we have run through the key parts of setting up Astro JS Sass styling. In particular, we looked at:
- how you can add global styles with Sass in Astro as well as scoped styles in Astro pages and components,
- using SCSS modules in Astro to add scoped styling to React components,
- configuration for Stylelint in Astro.
The Astro JS Sass styling demo code is in the Rodney Lab GitHub repo . You can also try it on Stackblitz .
I hope you found this article useful and am keen to hear how you will the starter on your own projects as well as possible improvements.
🏁 Astro JS Sass Styling: Summary #
Can you use Sass with Astro? #
- Astro fully supports Sass including global styles, scoped styles in Astro pages as well as in Svelte components. On top, you can add scoped Sass styling to React components using SCSS modules. We have seen you just need to install the sass package in your project to get going. For convenience, you may want to create a Sass variables file and import this into SCSS modules files or scoped style blocks. This lets you easily used centrally defined variables in these cases.
How can you add scoped styles to React components in Astro? #
- We have seen using SCSS modules to add scoped styles to React components works quite well in Astro. Typically, you define a side module file which defines the styling. Then you import the styles into your React component file. You can import all the styles as a default import, then take the classes from that styles object. For kebab-case class names, just use the JavaScript field bracket notation.
Does Stylelint work with Astro? #
- Yes. Stylelint is a great choice for keeping your styling maintainable in Astro. We have seen how to configure it with SCSS. You can add your own rules and tie these to your continuous integration process. This helps an entire team code consistently.
🙏🏽 Astro JS Sass Styling: Feedback #
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
🚀 Astro supports component-scoped styling out of the box. You can still use Sass though if that’s your preferred styling language.
— Rodney (@askRodney) April 18, 2022
You can find out how to use Sass with Astro in the post I just dropped:
@astrodotbuild #JAMStack #AstroJS https://t.co/yUmiu2bdvB
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also, subscribe to the newsletter to keep up-to-date with our latest projects.