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 JavaScript Functions as Mixin Directives for CSS-in-JS Style Declarations

Oleg Isonen

InstructorOleg Isonen

Share this video with your friends

Mixins are reusable pieces of code that allow you to group CSS declarations together. If we want to add another button with different button sizes, we can simply pass different arguments to a button size mixin that will format our the variables passed in into valid CSS.

You will learn how to use JavaScript functions as an alternative to @mixin directive. Also we will learn how a function can become a CSS mixin.