[CSSinJS] Convert Sass (SCSS) Styled Button to CSSinJS with JavaScript Templates and Variables

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.

 

The whole basic idea for CSSinJS is insert css into the Document's head in runtime... (of course not so well proference, better to do it in compile time)... but anyhow that is the basic idea.

 

// constants.js
const paddingY = '7px'
const paddingX = '10px'
const baseFontSize = '1rem'
const borderRadius = '5px'

// buttons.js
const button = `
  .cssinjs-btn {
    padding: ${paddingY} ${paddingX};
    font-size: ${baseFontSize};
    border-radius: ${borderRadius};
    color: #fff;
    background-color: green;
  }
`

// Render styles.
document.head.appendChild(
  document.createElement('style')
).textContent = button