Production vs development builds in SASS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the output style for a development build in Sass.

SASS

$output-style: [1];

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

Acompressed

Bexpanded

Cnested

Dcompact

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'compressed' which is for production to minimize file size.

In development, expanded style is used for easier reading of the CSS output.

2fill in blank

medium

Complete the code to set the output style for a production build in Sass.

SASS

$output-style: [1];

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

Acompact

Bexpanded

Cnested

Dcompressed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'expanded' which is better for development readability.

For production, compressed style is used to reduce file size by removing unnecessary spaces and line breaks.

3fill in blank

hard

Fix the error in the Sass build command to produce a compressed CSS file.

SASS

sass source.scss output.css --style=[1]

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

Acompact

Bexpanded

Ccompressed

Dnested

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'expanded' which creates readable but larger CSS.

The --style=compressed flag tells Sass to output minified CSS for production.

4fill in blank

hard

Fill both blanks to set variables for development and production output styles.

SASS

$dev-style: [1];
$prod-style: [2];

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

Aexpanded

Bcompressed

Cnested

Dcompact

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the styles between development and production.

Development uses expanded for readability, production uses compressed for smaller files.

5fill in blank

hard

Fill all three blanks to create a Sass script that chooses output style based on environment.

SASS

@if $env == 'production' {
  $output-style: [1];
} @else {
  $output-style: [2];
}

// Use the output style
sass source.scss output.css --style=[3]

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

Acompressed

Bexpanded

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong style for the environment or command line.

In production, use compressed style; in development, use expanded. The command line uses compressed for production.