JPKCom DB

Compiler — Examples

Hands-on runs with the Compiler: compile SCSS with Dart Sass, use Sass modules and @debug, minify JavaScript and HTML, make someone else's CSS readable.

Back to the overview: Compiler · Open the tool: www.jpkc.com/tools/compiler/

The manual explains every tab and option in detail. This page adds concrete workflows — typical tasks, walked through step by step. Tab and button names appear exactly as the tool labels them.

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; the SASS/SCSS tab is already active and pre-filled with a sample (@use "sass:color" and "sass:math", variables, a mixin, nesting).
  2. Replace the sample with your own SCSS, or use Upload file to load a .scss or .sass file.
  3. Leave Syntax on Auto-detect and the Output Style on Expanded (readable CSS), then click Compile.
  4. The first time, "Loading Sass compiler..." appears briefly — the Dart Sass module, roughly 0.9 MB gzip-compressed, 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 styles.css or, if you uploaded a file, under that file's name (theme.scss becomes theme.css).

If your SCSS has a syntax error, the tool doesn't blindly carry on: it writes the error message with line and column as a comment into the output, flags the line in the input editor, and puts the cursor right there — 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, with no superfluous whitespace.

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, rather than squeezing it out of finished CSS afterwards. Note that Download names the file styles.css here (or after your upload), without .min — the tool only appends that after a Minify in the other tabs. If you need a .min.css name, rename the file after saving it.

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 or .mjs file via Upload file).
  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 — the tool remembers the setting for your next visit.
  3. Click Minify. The shrinking is done by Terser (opens in a new tab); the result appears on the right.
  4. If your code has a syntax error, the Terser error message shows up in the output as // Error: … — fix the spot and minify again.
  5. Download saves the result as script.min.js — or, after uploading app.js, as app.min.js.

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 (opens in a new tab).

The same workflow applies in the HTML and JavaScript tabs. If your only goal is readability and the JavaScript comes in packed form (P.A.C.K.E.R. or URL-encoded), the dedicated Beautify tool is the better choice — it unpacks such code before formatting. Code obfuscated in other ways, such as with renamed variables, isn't untangled by either tool.

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. Every run of spaces and line breaks shrinks to a single space, and embedded <style> blocks are minified along with it; the result sits on the right, and the success message reports the savings in KB and percent.
  4. The tool copies the contents of <pre>, <textarea>, and <script> unchanged, and conditional comments (<!--[if …]>) survive even with Remove comments — the page looks the same afterwards as before.
  5. Download saves this version as index.min.html, or under your uploaded file's name plus .min.

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. Click Use output as input on the output card: the indented version now sits on the left in the input editor, and you edit it right there. Not happy with it? Ctrl+Z in the input editor restores the previous state in one step.
  3. For delivery, click Minify — there's your compact version, ready to take away via Copy or Download.

That's how you use both directions of the same tab as a pair: beautify to work, minify to ship. The same three steps work in the CSS and JavaScript tabs.

Example 7: Use modern Sass modules and @debug

You want to try code that uses the Sass module system and check intermediate values along the way.

  1. In the SASS/SCSS tab, paste a snippet like this one:

    scss
    @use "sass:math";
@use "sass:color";

$base: 16px;
$brand: #0d6efd;

@debug math.div($base, 2);

.card {
    padding: math.div($base, 2);
    border-color: color.adjust($brand, $lightness: -10%);
}

  2. Click Compile. The CSS appears on the right; the @debug output does not end up in it but in the yellow box below the editors ("1 message from Sass:", with the line number), and the line is flagged in the input editor's gutter.

  3. If Dart Sass reports warnings about outdated code along the way (prefix Deprecation:), they show up in the same list — so you can see which spots are worth modernizing.

You can't load files from your project via @use, though; if you need partials, paste them into the input editor as well.

Going deeper: the overview for the big picture, the manual for every engine and option in detail, and the tips & tricks for strategy and pitfalls. You can try all of it directly in the tool.