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

Import JavaScript Variables for Styling with CSS-in-JS

Oleg Isonen

InstructorOleg Isonen

Share this video with your friends

As your application grows, you probably want to split variables into separate files. You may want to share those variables with a different part of the application as well as logically separate them so that you can find them easier.

We will learn how to use JavaScript import statement for CSS in JS as a replacement for @import directive and what are the important differences for a large code base. We will also learn some basics about JavaScript modules.