Bird
Raised Fist0
SASSmarkup~5 mins

When to use SASS vs CSS-in-JS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. Which situation is best suited for using SASS instead of CSS-in-JS?
easy
A. When you want to avoid using any CSS preprocessors or JavaScript.
B. When you want styles tightly coupled with JavaScript components for dynamic styling.
C. When you want to write inline styles directly inside HTML tags.
D. When you want to write styles in separate files with powerful CSS features like variables and nesting.

Solution

  1. Step 1: Understand SASS purpose

    SASS is a CSS preprocessor that adds features like variables, nesting, and mixins to CSS, usually in separate style files.

  2. Step 2: Compare with CSS-in-JS use case

    CSS-in-JS is best when styles need to be tightly integrated with JavaScript components, often for dynamic styling.

  3. Final Answer:

    When you want to write styles in separate files with powerful CSS features like variables and nesting. -> Option D

  4. Quick Check:

    SASS for separate powerful CSS files = C [OK]
Hint: SASS = separate style files; CSS-in-JS = styles inside JS [OK]
Common Mistakes:
  • Confusing CSS-in-JS as better for all styling needs
  • Thinking SASS is only for inline styles
  • Assuming CSS-in-JS cannot use variables
2. Which of the following is the correct way to import a SASS file into another SASS file?
easy
A. @import 'styles.css';
B. @import 'variables.scss';
C. import 'variables.scss';
D. require('variables.scss');

Solution

  1. Step 1: Recall SASS import syntax

    SASS uses @import 'filename.scss'; to include other SASS files.

  2. Step 2: Check options for correct syntax

    @import 'variables.scss'; uses @import 'variables.scss'; which is correct. @import 'styles.css'; imports a CSS file, which is allowed but not typical for SASS partials. Options C and D use JavaScript syntax, which is incorrect in SASS.

  3. Final Answer:

    @import 'variables.scss'; -> Option B

  4. Quick Check:

    SASS import uses @import 'file.scss' = A [OK]
Hint: SASS imports use @import with quotes and .scss extension [OK]
Common Mistakes:
  • Using JavaScript import syntax in SASS
  • Importing CSS files instead of SASS partials
  • Omitting quotes around file names
3. Given this SASS code:
$primary-color: blue;
.button {
  color: $primary-color;
  &:hover {
    color: darken($primary-color, 20%);
  }
}

What will be the color of the button text on hover in the compiled CSS?
medium
A. a darker shade of blue
B. blue
C. light blue
D. red

Solution

  1. Step 1: Understand variable usage

    The variable $primary-color is set to blue and used as the button text color.

  2. Step 2: Analyze hover color function

    The darken($primary-color, 20%) function makes the blue color 20% darker on hover.

  3. Final Answer:

    a darker shade of blue -> Option A

  4. Quick Check:

    darken(blue, 20%) = darker blue [OK]
Hint: darken() makes colors darker by given percent [OK]
Common Mistakes:
  • Thinking hover color stays the same
  • Confusing darken() with lighten()
  • Assuming color changes to red
4. You wrote this CSS-in-JS code inside a React component:
const styles = {
  button: {
    color: 'blue',
    '&:hover': {
      color: 'darkblue'
    }
  }
};

But the hover style is not working. What is the likely problem?
medium
A. CSS-in-JS does not support pseudo-classes like :hover.
B. The color values must be variables, not strings.
C. The syntax for nested selectors in CSS-in-JS is incorrect; it should use a string key like ':hover' instead of '&:hover'.
D. The styles object must be converted to a CSS file manually.

Solution

  1. Step 1: Understand CSS-in-JS pseudo-class syntax

    In many CSS-in-JS libraries, nested selectors use the key ':hover' without the ampersand (&).

  2. Step 2: Identify syntax error

    The code uses '&:hover' which is valid in SASS but often incorrect in CSS-in-JS, causing hover styles to fail.

  3. Final Answer:

    The syntax for nested selectors in CSS-in-JS is incorrect; it should use a string key like ':hover' instead of '&:hover'. -> Option C

  4. Quick Check:

    CSS-in-JS pseudo-classes use ':hover' key, not '&:hover' [OK]
Hint: Use ':hover' key in CSS-in-JS, not '&:hover' [OK]
Common Mistakes:
  • Using SASS syntax in CSS-in-JS
  • Thinking CSS-in-JS can't do hover
  • Forgetting to apply styles via className
5. You have a React project where components need dynamic styles based on props, but also want to share common styles across many components in separate files. Which approach best fits this need?
hard
A. Combine SASS for shared styles in separate files and CSS-in-JS for dynamic styles inside components.
B. Use only CSS-in-JS to keep all styles inside components with no external files.
C. Write all styles inline in HTML style attributes.
D. Use only SASS with separate .scss files and import them everywhere.

Solution

  1. Step 1: Analyze project needs

    The project needs shared common styles in separate files and dynamic styles based on props inside components.

  2. Step 2: Match approaches to needs

    SASS is great for shared styles in separate files. CSS-in-JS excels at dynamic styling inside components.

  3. Step 3: Combine approaches

    Using both allows shared styles in SASS files and dynamic styles with CSS-in-JS, fitting both requirements.

  4. Final Answer:

    Combine SASS for shared styles in separate files and CSS-in-JS for dynamic styles inside components. -> Option A

  5. Quick Check:

    Shared styles + dynamic props = combine SASS + CSS-in-JS [OK]
Hint: Use SASS for shared, CSS-in-JS for dynamic styles [OK]
Common Mistakes:
  • Trying to do all styling only with SASS or only CSS-in-JS
  • Ignoring benefits of combining both
  • Using inline styles for complex shared styles