When to use SASS vs CSS-in-JS - Hands-On Comparison

When to use SASS vs CSS-in-JS

📖 Scenario: You are working on a web project where you need to style components efficiently. You want to understand when to use SASS, a CSS preprocessor, and when to use CSS-in-JS, a styling method inside JavaScript.

🎯 Goal: Learn the differences between SASS and CSS-in-JS and create a simple example using SASS variables and nesting, then add a CSS-in-JS style block in JavaScript to see how both approaches work.

📋 What You'll Learn

Create a SASS file with variables and nested styles

Create a JavaScript file with a CSS-in-JS style object

Understand when to use SASS for global styles and CSS-in-JS for component-level styles

Use semantic HTML to apply styles

Ensure styles are responsive and accessible

💡 Why This Matters

🌍 Real World

Web developers often choose between SASS and CSS-in-JS depending on project needs. Understanding when to use each helps build maintainable and scalable styles.

💼 Career

Knowing both SASS and CSS-in-JS is valuable for frontend developer roles, as many companies use one or both for styling React or other component-based frameworks.

1

Create a SASS file with variables and nested styles

Create a SASS file named styles.scss. Define a variable $primary-color with the value #3498db. Then create a style for the body element that sets the background color to $primary-color. Inside body, nest a style for h1 that sets the font size to 2rem and color to white.

SASS

// Your code here

Need a hint?

Use SASS variables with $ and nest the h1 style inside the body style block.

2

Create a JavaScript file with a CSS-in-JS style object

Create a JavaScript file named styles.js. Define a constant object called buttonStyle with properties: backgroundColor set to '#e74c3c', color set to 'white', padding set to '0.5rem 1rem', and borderRadius set to '0.25rem'.

SASS

$primary-color: #3498db;

body {
  background-color: $primary-color;
  h1 {
    font-size: 2rem;
    color: white;
  }
}

// Your code here

Need a hint?

Use a JavaScript object with camelCase property names for CSS-in-JS styles.

3

Explain when to use SASS for global styles

Add a comment in the JavaScript file explaining that SASS is best used for global styles, reusable variables, and complex nested selectors that apply across the whole website.

SASS

$primary-color: #3498db;

body {
  background-color: $primary-color;
  h1 {
    font-size: 2rem;
    color: white;
  }
}

const buttonStyle = {
  backgroundColor: '#e74c3c',
  color: 'white',
  padding: '0.5rem 1rem',
  borderRadius: '0.25rem'
};

// Your comment here

Need a hint?

Write a clear comment starting with // explaining SASS usage for global styles.

4

Explain when to use CSS-in-JS for component-level styles

Add a comment in the JavaScript file explaining that CSS-in-JS is great for styling individual components, dynamic styles based on state, and keeping styles close to the component logic.

SASS

$primary-color: #3498db;

body {
  background-color: $primary-color;
  h1 {
    font-size: 2rem;
    color: white;
  }
}

const buttonStyle = {
  backgroundColor: '#e74c3c',
  color: 'white',
  padding: '0.5rem 1rem',
  borderRadius: '0.25rem'
};

// SASS is best for global styles, reusable variables, and complex nested selectors that apply across the whole website.

// Your comment here

Need a hint?

Write a clear comment starting with // explaining CSS-in-JS usage for component-level styles.