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

Convert Sass (SCSS) Styled Button to CSS-in-JS with JavaScript Templates and Variables

Share this video with your friends

This is an introduction to CSSinJS that doesn't require any JavaScript knowledge, just a basic CSS.

It shows how to convert a very basic button written in Sass (SCSS) to CSSinJS without using any CSS in JS libraries. It uses native JavaScript variables and template literals.

Course

Convert SCSS (Sass) to CSS-in-JS

Cristian Gabbanini

~ 6 years ago

Oleg Isoneninstructor

~ 6 years ago

I think it is a specific issue with your code. If you really inject styles first, html second, you would not see the FOUC. Feel free to post a reproducible example on codesandbox.

Best, Oleg

Damian Joniec

~ 5 years ago

I'm still not sure how to use it in react, can you tell me how to do that part in react: document.head.appendChild( document.createElement('style') ).textContent = button

basically I don't know how to connect it to react cra app

Oleg Isoneninstructor

~ 5 years ago

This course so far is about foundational knowledge, not React specific.

Cristian Gabbanini

~ 5 years ago

@damianjnc for something specific to React you could refer to https://github.com/emotion-js/emotion