… is so much slicker than React!

Image for post
Image for post

I have a Hamburger icon which is a standalone component. When the user clicks it, I want it to change the hamburger icon into a [close] icon and I want its parent (the _layout component) to open up the mobile menu. I also want the mobile menu to go away whenever a link is clicked from the open menu. Then on top of that, I want an escape key press to both close the menu and reset the hamburger icon.

My components are:


The React Way

In React, we might use the useState hook to track the state of mobileNavOpen, then pass that value as a prop to both Hamburger and NavMobile. In order to change that value, we'd also have to pass down a function called toggleMobileNav(). So _layout would pass the value and the function for the children components to use in order to change the value in the parent which in turn gets passed back to the children. …

The Svelte-based web framework Sapper gives us a lot out of the box. Declarative routing, free SSR for every route, baked in support for API routes, and so much more. But if you want to use Sass or Stylus or another preprocessor, you’re on your own. 😕

Image for post
Image for post

There are 3 things we want to do…

  • Parse Sass within <style lang="scss"> tags.
  • Apply a global theme to the entire site and make variables/mixins available everywhere.
  • Get VS Code syntax highlighting support for Sass in .svelte files.

1. Parse <style lang="scss"> tags

First, we need to add a couple NPM modules:

npm i -D svelte-preprocess autoprefixer node-sass

Now modify rollup.config.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store