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

Instructor: [00:00] As you can see, we have two buttons. One is a SASS button, which is already implemented, and it is blue. The other one is CSS-in-JS button, and it is currently unstyled. Now, let's implement a button using CSS-in-JS, but let's have a look first at the SASS button.

[00:20] We use variables in this example in order to demonstrate how you would structure a large application. Now, let's re-implement the same button using CSS-in-JS. First of all, let's create the button JS file. Now, let's import this button in the main index. We had a bunch of variables in the SASS button. Let's write the same variables in JavaScript.

[00:44] Two things you have to know about variables over here. In JavaScript, we have to use const statement in order to declare a constant. The second thing is we have to use quotes around the values. The reason is CSS is not native to JavaScript, which means JavaScript doesn't know about CSS primitives. We have to define them as strings.

[01:07] Now, let's declare the button style. As you can see, we have a constant for the button, and we have these backticks over here. Backticks allow us to write [inaudible] align strings in JavaScript. They are also called template literals because they allow us to use variables in site.

[01:25] Here, we have our selector. Here, we have our CSS rule declaration. As you can see, we use Tor and Tor-base in order to use the variables. This is called interpolation. Now, as we have defined this CSS-in-JS button, we have to render it. As you can see, we can render it really simple.

[01:47] What do we do here? First thing, we create a style tag. Then, we insert this style tag into the head of the document. Then, we use text content setter in order to render our styles.