# Compiler — Examples

> Hands-on runs with the Compiler: compile SCSS to CSS, minify JavaScript, beautify someone else's CSS, and produce production-ready CSS in one step.

Source: https://www.jpkc.com/db/en/tools/compiler/examples/

Back to the overview: [Compiler](https://www.jpkc.com/db/en/tools/compiler/) · Open the tool: [www.jpkc.com/tools/compiler/](https://www.jpkc.com/tools/compiler/)

The [manual](https://www.jpkc.com/db/en/tools/compiler/manual/) explains every tab and option in detail. This page adds **concrete workflows** — typical tasks, walked through step by step. The tool's interface is in English, so tab and button names appear in their original spelling.

## Example 1: Compile SCSS to CSS

The classic — you have an SCSS snippet and want to see the CSS it produces.

1. Open the [Compiler](https://www.jpkc.com/tools/compiler/); the `SASS/SCSS` tab is already active and pre-filled with a sample (variables, a mixin, nesting).
2. Replace the sample with your own SCSS, or use **Upload** to load a `.scss` file.
3. Leave the **Output Style** on `Expanded` (readable CSS) and click **Compile**.
4. The first time, "Loading SASS compiler…" appears briefly — the roughly 4 MB compiler module is loaded once. After that the finished CSS sits in the output editor on the right.
5. Grab it with **Copy** to the clipboard, or **Download** it as `output.css`.

If your SCSS has a syntax error, the tool doesn't blindly carry on — it writes an error message **with line and column** as a comment into the output, so you see immediately where it breaks.

## Example 2: Production-ready, minified CSS in one step

You want compressed CSS straight from SCSS, without a separate minify step afterwards.

1. Stay in the `SASS/SCSS` tab and paste your SCSS.
2. Set the **Output Style** to `Compressed`.
3. **Compile** — the output is now minified CSS on a single line, free of whitespace and comments.

This saves the detour through the `CSS` minify tab and is the clean route when your stylesheet originates from SCSS anyway: the engine produces the compressed form itself, instead of squashing it afterwards with text rules.

## Example 3: Minify JavaScript

A helper function or a small script needs to be shrunk for production.

1. Switch to the `JavaScript` tab and paste your code (or load a `.js` file via **Upload**).
2. Check the minify options: **Mangle names** (default: on) shortens local names; **Drop console** (default: off) removes `console.*` calls. For production code it often pays to tick **Drop console** as well.
3. Click **Minify**. The shrinking is done by [Terser](https://terser.org/); the result appears on the right.
4. If your code has a syntax error, the Terser error message shows in the output — fix the spot and minify again.

If you instead need **readable** code (say, an indented version of a compact file), use **Beautify** rather than Minify in the same tab.

## Example 4: Make someone else's squashed CSS readable

You've received minified CSS — all on one line — and want to understand it.

1. Go to the `CSS` tab and paste the compact CSS into the input editor.
2. Pick your preferred **Indent Size** (`2 spaces` or `4 spaces`).
3. Click **Beautify**. The CSS appears on the right, cleanly indented with line breaks and one declaration per line — via [JS Beautifier](https://beautifier.io/).

The same workflow applies in the `HTML` and `JavaScript` tabs. If your only goal is readability *and* you're dealing with deliberately obfuscated code, the dedicated **[Beautify](https://www.jpkc.com/db/en/tools/beautify/)** tool is the better choice — it can additionally deobfuscate.

## Example 5: Minify HTML for delivery

An HTML fragment should become more compact for production.

1. Switch to the `HTML` tab and paste your markup.
2. If you also want to lose the comments, tick **Remove comments** (this option only applies to Minify).
3. Click **Minify**. Whitespace between tags and repeated whitespace are removed; the result sits on the right.
4. **Watch out for whitespace-sensitive regions:** if your HTML contains `<pre>` or `<textarea>`, check the result — the rule-based minify routine can alter whitespace there.

## Example 6: From compact to indented HTML and back

You juggle between readable editing and compact delivery.

1. In the `HTML` tab, paste compact markup and click **Beautify** — choose **Indent Size** and **Wrap Length** (e.g. `120`) first. The result is cleanly indented and easy to read.
2. Take the output via **Copy** and edit it elsewhere.
3. For delivery, paste the same markup again and click **Minify** — there's your compact version.

That's how you use both directions of the same tab as a pair: beautify to work, minify to ship.

---

Going deeper: the [overview](https://www.jpkc.com/db/en/tools/compiler/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/compiler/manual/) for every engine and option in detail, and the [tips & tricks](https://www.jpkc.com/db/en/tools/compiler/tips/) for strategy and pitfalls. You can try all of it directly in the [tool](https://www.jpkc.com/tools/compiler/).