Production vs development builds in SASS - Hands-On Comparison

Production vs Development Builds with Sass

📖 Scenario: You are working on a website's styles using Sass. You want to create two versions of your CSS: one for development with readable code and comments, and one for production that is smaller and faster to load.

🎯 Goal: Build two Sass files: one configured for development with expanded output style and comments, and one configured for production with compressed output style and no comments.

📋 What You'll Learn

Create a Sass file with some basic styles

Add a configuration variable to switch between development and production modes

Use Sass features to output expanded CSS with comments in development mode

Use Sass features to output compressed CSS without comments in production mode

💡 Why This Matters

🌍 Real World

Web developers often need to create different CSS files for development and production to improve debugging and performance.

💼 Career

Understanding how to configure Sass for different build environments is important for front-end developers working on professional websites.

1

Create a basic Sass file with styles

Create a Sass file named styles.scss with these styles: a body selector that sets font-family to Arial, sans-serif and a p selector that sets color to #333333.

SASS

/* Your Sass styles here */

body {
  font-family: Arial, sans-serif;
}

p {
  color: #333333;
}

Hint

Write the styles exactly as shown for body and p selectors.

2

Add a configuration variable for build mode

Add a Sass variable named $build-mode and set it to 'development'.

SASS

$build-mode: 'development';

body {
  font-family: Arial, sans-serif;
}

p {
  color: #333333;
}

// Your code here

Hint

Define the variable $build-mode at the top of the file.

3

Use the build mode to set output style and comments

Write a Sass mixin named build-config that uses @if to check if $build-mode is 'development'. If yes, set output-style to expanded and enable comments. Otherwise, set output-style to compressed and disable comments.

SASS

$build-mode: 'development';

@mixin build-config() {
  // Your code here
}

body {
  font-family: Arial, sans-serif;
}

p {
  color: #333333;
}

Hint

Use @if inside the mixin to check $build-mode and add different code blocks.

4

Apply the build configuration and finalize

Include the build-config mixin at the top of the file to apply the build settings.

SASS

$build-mode: 'development';

@mixin build-config() {
  @if $build-mode == 'development' {
    @debug "Development build: expanded output with comments";
  } @else {
    @debug "Production build: compressed output without comments";
  }
}

@include build-config();

body {
  font-family: Arial, sans-serif;
}

p {
  color: #333333;
}

// Your code here

Hint

Use @include build-config(); to run the mixin and apply settings.

Practice

1. What is the main reason to use the expanded style in Sass during development?

easy

A. To disable CSS comments

B. To reduce the file size for faster loading

C. To automatically minify the CSS

D. To make the CSS easier to read and debug

Solution

1. Step 1: Understand the purpose of expanded style

   The expanded style formats CSS with indentation and line breaks, making it easy to read.

2. Step 2: Compare with production needs

   In development, readability helps debugging, unlike production where file size matters more.

3. Final Answer:

   To make the CSS easier to read and debug -> Option D

4. Quick Check:

   Expanded style = readable CSS [OK]

Hint: Expanded style means readable CSS for easier debugging [OK]

Common Mistakes:

• Confusing expanded with compressed style
• Thinking expanded reduces file size
• Assuming expanded removes comments

2. Which Sass command correctly compiles a file style.scss into compressed CSS for production?

easy

A. sass style.scss style.css --style=expanded

B. sass style.scss style.css --style=compressed

C. sass style.scss style.css --watch

D. sass style.scss style.css --style=nested

Solution

1. Step 1: Identify the flag for compressed output

   The --style=compressed option tells Sass to minify CSS for production.

2. Step 2: Check other options

   expanded is for readable CSS, --watch watches files but doesn't set style, nested is another readable format.

3. Final Answer:

   sass style.scss style.css --style=compressed -> Option B

4. Quick Check:

   Compressed style = minified CSS [OK]

Hint: Use --style=compressed for production CSS [OK]

Common Mistakes:

• Using expanded style for production
• Confusing --watch with style option
• Using nested style for production

3. Given this Sass command:

sass input.scss output.css --style=compressed

What will the CSS output look like?

medium

A. CSS with all unnecessary spaces and line breaks removed

B. CSS with comments preserved and spaced out

C. CSS with readable indentation and line breaks

D. CSS with nested selectors expanded but spaced

Solution

1. Step 1: Understand the compressed style effect

   The compressed style removes spaces and line breaks to minimize file size.

2. Step 2: Compare with other styles

   Readable indentation and comments are removed in compressed output to optimize loading speed.

3. Final Answer:

   CSS with all unnecessary spaces and line breaks removed -> Option A

4. Quick Check:

   Compressed style = minified CSS [OK]

Hint: Compressed style means minified CSS without spaces [OK]

Common Mistakes:

• Expecting readable CSS with compressed style
• Thinking comments stay in compressed output
• Confusing nested style with compressed

4. You run sass style.scss style.css --style=compressed but the output CSS is still very large and readable. What is the likely cause?

medium

A. The output file is cached and not updated

B. You used the wrong flag; --style=expanded was used instead

C. The Sass compiler version does not support compressed style

D. You forgot to save the style.scss file before compiling

Solution

1. Step 1: Check if output file is updated

   If the output CSS looks unchanged, it might be cached by the system or browser.

2. Step 2: Verify compilation flags and file saving

   Since the command uses --style=compressed and file is saved, caching is the likely issue.

3. Final Answer:

   The output file is cached and not updated -> Option A

4. Quick Check:

   Cache can cause stale CSS output [OK]

Hint: Clear cache if CSS output looks unchanged after compiling [OK]

Common Mistakes:

• Assuming wrong flag without checking command
• Not saving source file before compiling
• Blaming Sass version without checking cache

5. You want to switch your Sass build from development to production. Which two changes should you make to optimize your CSS for fast loading?

hard

A. Change --style from expanded to compressed and enable source maps

B. Keep expanded style and disable source maps

C. Change --style from expanded to compressed and disable source maps

D. Keep expanded style and enable source maps for debugging

Solution

1. Step 1: Change CSS style for production

   Switching from expanded to compressed reduces file size for faster loading.

2. Step 2: Manage source maps for production

   Disabling source maps in production avoids extra files and speeds up loading.

3. Final Answer:

   Change --style from expanded to compressed and disable source maps -> Option C

4. Quick Check:

   Compressed + no source maps = optimized production CSS [OK]

Hint: Use compressed style and disable source maps for production [OK]

Common Mistakes:

• Leaving source maps enabled in production
• Keeping expanded style for production
• Confusing enabling source maps with optimization