illustration for Convert SCSS (Sass) to CSS-in-JS

Course

Convert SCSS (Sass) to CSS-in-JS

1
Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables
2m
2
Import JavaScript Variables for Styling with CSS-in-JS
2m 5s
3
Import and Render Style Partials from JavaScript Modules with CSS-in-JS
2m 16s
4
Use JavaScript Functions as Mixin Directives for CSS-in-JS Style Declarations
2m 13s
5
Destructure Named CSS-in-JS Arguments to use in JavaScript Mixin Functions
1m 59s
6
Define and Override Default CSS-in-JS Values for Arguments in a JavaScript Function Mixin
1m 37s
7
Apply Multiple CSS-in-JS Arguments in a JavaScript Mixin Function with the Rest Operator
1m 54s
8
Express CSS with JavaScript Objects for CSS-in-JS Notation
3m 14s
9
Use JavaScripts Spread Operator to Apply Style Objects Returned from CSS-in-JS Mixins
1m 54s
10
Prevent CSS Class Name Collisions with Scoped Class Names in CSS-in-JS
3m 39s
11
Style HTML with JavaScript Template Strings and Objects in CSS-in-JS
57s

Express CSS with JavaScript Objects for CSS-in-JS Notation

Oleg Isonen

InstructorOleg Isonen

Share this video with your friends

When using JavaScript string templates to define styles in CSS-in-JS, there is a lot of interpolation syntax noise.

In this lesson, you will start with a CSS-in-JS string and walk through how to remove excess noise from the style declarations by using JavaScript Object Notation. We will build a small utility function that will convert the style object we declare to a string that can be applied to our HTML.