When to use SASS vs CSS-in-JS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a SASS variable for a primary color.

SASS

$primary-color: [1];

Drag options to blanks, or click blank then click option'

AprimaryColor

Bcolor-primary

Cblue

D#3498db

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without $

Using plain words instead of color codes

In SASS, variables start with a $ and are assigned values like colors using hex codes.

2fill in blank

medium

Complete the code to nest CSS selectors in SASS.

SASS

.button {
  color: white;
  &:[1] {
    background-color: blue;
  }
}

Drag options to blanks, or click blank then click option'

Aclick

Bactive

Chover

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' which is not a CSS pseudo-class

Confusing 'active' and 'hover'

In SASS, &:hover is used to style the hover state of an element.

3fill in blank

hard

Fix the error in the CSS-in-JS style object to correctly set the background color.

SASS

const styles = {
  container: {
    backgroundColor: [1]
  }
};

Drag options to blanks, or click blank then click option'

A'blue'

Bblue

C#blue

Dbackground-color: blue

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around color values

Using CSS syntax inside JS objects

In CSS-in-JS, color values must be strings, so use quotes around the color name.

4fill in blank

hard

Fill both blanks to create a SASS mixin and use it in a class.

SASS

@mixin [1]($color) {
  color: $color;
}

.text {
  @include [2](red);
}

Drag options to blanks, or click blank then click option'

Atext-color

BtextColor

Ccolor-text

DcolorText

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase names in SASS mixins

Mismatching mixin names between definition and usage

A SASS mixin is defined with @mixin and included with @include. The same name must be used for both.

5fill in blank

hard

Fill all three blanks to create a CSS-in-JS style with a hover effect.

SASS

const styles = {
  button: {
    backgroundColor: [1],
    color: [2],
    '&:[3]': {
      backgroundColor: 'darkblue'
    }
  }
};

Drag options to blanks, or click blank then click option'

A'blue'

B'white'

Chover

D'black'

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around colors

Using CSS syntax instead of JS object keys for hover

In CSS-in-JS, colors are strings and hover styles use the &:hover selector as a key.