Convert SCSS (Sass) to CSS-in-JS

CSS uses a global namespace for CSS Selectors that can easily result in style conflicts throughout your application when building an application using modern web components. You can avoid this problem by nesting CSS selectors or use a styling convention like BEM but this becomes complicated quickly and won’t scale.
CSS-in-JS avoids these problems entirely by generating unique class names when styles are converted to CSS. This allows you to think about styles on a component level with out worrying about styles defined elsewhere.
In this course, you will learn how to express popular SCSS (Sass) language features using latest JavaScript features. We will convert simple examples from SCSS to CSS-in-JS. As a designer or (S)CSS developer, you should be able to follow without extensive JavaScript knowledge, understanding SCSS is required though. We will not be using any particular CSSinJS libraries. Instead, we will focus on a base knowledge you need later if you use any CSSinJS library.

• Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables
• Import JavaScript Variables for Styling with CSS-in-JS
• Import and Render Style Partials from JavaScript Modules with CSS-in-JS
• Use JavaScript Functions as Mixin Directives for CSS-in-JS Style Declarations
• Destructure Named CSS-in-JS Arguments to use in JavaScript Mixin Functions
• Define and Override Default CSS-in-JS Values for Arguments in a JavaScript Function Mixin
• Apply Multiple CSS-in-JS Arguments in a JavaScript Mixin Function with the Rest Operator
• Express CSS with JavaScript Objects for CSS-in-JS Notation
• Use JavaScripts Spread Operator to Apply Style Objects Returned from CSS-in-JS Mixins
• Prevent CSS Class Name Collisions with Scoped Class Names in CSS-in-JS
• Style HTML with JavaScript Template Strings and Objects in CSS-in-JS