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

Use JavaScripts Spread Operator to Apply Style Objects Returned from CSS-in-JS Mixins

Oleg Isonen

InstructorOleg Isonen

Share this video with your friends

When defining CSS-in-JS style to use JavaScript Object Notation, mixins can no longer return strings as they can't be added to the object.

In this lesson, you will convert the boxShadow and buttonSize mixins that return strings to return objects instead and spread those objects into the style object we are applying to an HTML Element.