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;
}

Need a 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

Need a 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;
}

Need a 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

Need a hint?

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