What is When to use SASS vs CSS-in-JS?

SASSmarkup~5 mins

When to use SASS vs CSS-in-JS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

You want to style websites easily and keep your styles organized. SASS and CSS-in-JS are two ways to do this, each good for different situations.

You have a big website with many pages and want to keep styles in separate files.

You want to use variables, nesting, and reusable style parts in your CSS.

You are building a React app and want styles tightly connected to components.

You want to write styles using JavaScript logic and dynamic values.

You want to share styles easily between JavaScript and CSS.

Syntax

SASS

/* SASS example */
$main-color: #3498db;

.button {
  background-color: $main-color;
  &:hover {
    background-color: darken($main-color, 10%);
  }
}

// CSS-in-JS example (React)
const buttonStyle = {
  backgroundColor: '#3498db'
};

SASS uses its own syntax and compiles to regular CSS files.

CSS-in-JS writes styles inside JavaScript, often inside components.

Examples

SASS example showing variables and nesting for hover styles.

SASS

$primary-color: #e74c3c;

.card {
  border: 1px solid $primary-color;
  padding: 1rem;
  &:hover {
    background-color: lighten($primary-color, 40%);
  }
}

CSS-in-JS example defining styles as a JavaScript object.

SASS

const cardStyle = {
  border: '1px solid #e74c3c',
  padding: '1rem'
};

Sample Program

This example shows two buttons: one styled with SASS-compiled CSS and one styled using CSS-in-JS with JavaScript. Both change color on hover.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SASS vs CSS-in-JS Example</title>
  <style>
    /* Compiled SASS styles */
    .button {
      background-color: #3498db;
      color: white;
      padding: 1rem 2rem;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      border-radius: 0.5rem;
      transition: background-color 0.3s ease;
    }
    .button:hover {
      background-color: #2c80b4;
    }
  </style>
</head>
<body>
  <button class="button">SASS Styled Button</button>
  <script>
    // CSS-in-JS style applied via JavaScript
    const cssInJsButton = document.createElement('button');
    cssInJsButton.textContent = 'CSS-in-JS Styled Button';
    cssInJsButton.style.backgroundColor = '#e67e22';
    cssInJsButton.style.color = 'white';
    cssInJsButton.style.padding = '1rem 2rem';
    cssInJsButton.style.border = 'none';
    cssInJsButton.style.cursor = 'pointer';
    cssInJsButton.style.fontSize = '1rem';
    cssInJsButton.style.borderRadius = '0.5rem';
    cssInJsButton.style.transition = 'background-color 0.3s ease';
    cssInJsButton.addEventListener('mouseover', () => {
      cssInJsButton.style.backgroundColor = '#b36116';
    });
    cssInJsButton.addEventListener('mouseout', () => {
      cssInJsButton.style.backgroundColor = '#e67e22';
    });
    document.body.appendChild(cssInJsButton);
  </script>
</body>
</html>

OutputSuccess

Important Notes

SASS is great for traditional websites where styles are separate from JavaScript.

CSS-in-JS works well in JavaScript frameworks like React where styles live with components.

Using CSS-in-JS can make dynamic styling easier but might add complexity for simple sites.

Summary

Use SASS when you want powerful CSS features and separate style files.

Use CSS-in-JS when you want styles tightly connected to JavaScript components.

Both help organize styles but fit different project needs and workflows.