Autoplay

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

    Oleg IsonenOleg Isonen

    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.

    scssSCSS
    javascriptJavaScript
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss