0
0
SASSmarkup~5 mins

Production vs development builds in SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

We use different builds to make our styles faster for users in production and easier to work with during development.

When you want quick feedback while writing styles.
When you want smaller files for faster website loading.
When you want readable code for debugging.
When you want to remove extra comments and spaces before publishing.
When you want to test your styles before making them live.
Syntax
SASS
sass --style=expanded input.scss output.css  # for development
sass --style=compressed input.scss output.css  # for production

expanded style makes CSS easy to read with spaces and new lines.

compressed style removes spaces and new lines to make CSS smaller.

Examples
This command creates a readable CSS file good for development.
SASS
sass --style=expanded styles.scss styles.css
This command creates a small CSS file good for production.
SASS
sass --style=compressed styles.scss styles.min.css
Sample Program

This HTML file links to a CSS file created from Sass. Use --style=expanded for development to see readable CSS. Use --style=compressed for production to have smaller CSS files that load faster.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Production vs Development CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome!</h1>
  </header>
  <main>
    <p>This page shows how CSS looks in development and production builds.</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Development builds help you find and fix style problems quickly.

Production builds make your website faster by reducing file size.

Always test your production build to make sure styles still work well.

Summary

Use expanded style for easy-to-read CSS during development.

Use compressed style for small, fast CSS in production.

Switching builds helps balance between easy coding and fast websites.