{{ summaryHeading }} {{ summaryPrimary }} {{ summaryLine }} {{ syntaxLabel }} {{ outputStyleLabel }} {{ compilerBadge }}
Use one self-contained stylesheet. Inline dependencies that would otherwise need project load paths.
{{ sourceMeta }}
{{ sourceStatusLine }}
Choose the grammar that matches the source file.
The selected style changes the generated CSS and its footprint.
No source map is the neutral default; map source contents may expose private code.
Use a whole number from 0 to 10.
Off preserves the neutral expanded-output profile.
{{ sourceCommentsEnabled ? 'On' : 'Off' }}
This setting is inert while source-map output is omitted.
{{ sourceMapContentsEnabled ? 'On' : 'Off' }} 
{{ compiledCssDisplay }}
MetricValueDetailCopy
{{ row.metric }}{{ row.value }}{{ row.detail }}
CheckStatusEvidenceCopy
{{ row.check }}{{ row.status }}{{ row.detail }}
CSS Minifier Minify CSS locally with conservative rewrite profiles and byte-savings metrics, while preserving protected comments and flagging release risks.
CSS Grid Generator Build responsive or fixed CSS Grid rules with auto-fit and auto-fill options, fit estimates, plus narrow-container safeguards and starter HTML.
CSS Flexbox Generator Build Flexbox container and optional child-sizing CSS with axis-aware alignment, wrapping warnings, plus a live preview and starter HTML.
CSS Gradient Generator Build CSS gradients using linear, radial or conic geometry with exact color stops and optional modern interpolation spaces for copy-ready stylesheets.

Sass adds reusable variables, nesting, mixins, functions, and control rules to stylesheet authoring, but browsers ultimately need CSS. Compilation resolves those authoring features into selectors and declarations that a browser can parse.

Sass has two source syntaxes. SCSS uses braces and semicolons and is largely compatible with CSS syntax. The indented syntax uses line indentation in place of braces and is commonly stored in .sass files. Choosing the wrong grammar can turn valid source into a parser error.

Source formTypical cuesWhat compilation does
SCSS$variables, braces, semicolons, nested selectorsEvaluates Sass features and emits CSS
Indented SassIndentation-defined blocks without braces or semicolonsParses the indented grammar and emits CSS
Plain CSS checkOrdinary CSS declarations and at-rulesRuns the source through the same legacy Sass parser

Compiler identity matters. The browser compiler used here is based on LibSass, which is deprecated and does not implement the modern Sass module system. A successful result can still differ from a current Dart Sass project when the source depends on @use, @forward, newer language behavior, project load paths, or modern CSS syntax that LibSass never learned.

A source map can connect generated CSS positions back to the source stylesheet. That is useful for debugging, but a map that includes source contents may expose the full stylesheet when it is shared or deployed.

How to Use This Tool:

Use a self-contained stylesheet whose dependencies do not rely on project load paths.

  1. Paste the Stylesheet source or load one SCSS, Sass, CSS, or text file smaller than 1.5 MiB.
  2. Choose the matching Input syntax and an Output style. Use expanded CSS for review or compressed CSS when byte size is the priority.
  3. Open Advanced only when you need a source map, a precision from 0 to 10 digits, source comments, or embedded source contents.
  4. Read Compiled CSS for parser errors, then check Compatibility audit for the compiler engine, module directives, imports, and legacy color helpers.
  5. Confirm the result with the project's production Sass compiler before replacing a build artifact, especially when any audit row says Review.

Interpreting Results:

A parser pass means the selected browser compiler produced CSS from the supplied single file. It does not prove compatibility with current Dart Sass, resolve a project's dependency graph, or show that the CSS behaves correctly in every target browser.

  • Sass.js LibSass identifies the full legacy browser compiler. Fallback subset is a limited recovery path for simple variables and nesting and always needs project verification.
  • An @use or @forward finding means the source depends on the modern module system that LibSass does not support.
  • An @import finding warns that this single-file compile cannot resolve external project dependencies.
  • A smaller byte count describes this output only. It says nothing about selector correctness, unused rules, cascade behavior, or delivery compression.

Technical Details:

Compilation has two distinct jobs here: producing CSS with the available Sass engine and inspecting the resulting text. The feature counts and footprint metrics are lexical scans, not a second CSS or Sass parser.

Transformation Core

The source passes through the selected grammar, output-style, precision, comment, and source-map settings. A successful compile returns CSS and, when supported and requested, a map. The result is then scanned for byte size, lines, rule blocks, at-rules, Sass authoring features, and compatibility warnings.

SettingEffectBoundary
Output styleNested, expanded, compact, or compressed LibSass formattingChanges emitted whitespace and layout, not the intended declarations
Number precisionControls decimal places used for calculated numeric outputWhole number from 0 to 10; default 5
Source commentsAdds source-line comments where the chosen legacy style supports themOff by default
External mapReturns a separate compiled.css.map handoff when availableThe browser compiler may return no map
Embedded mapRequests a map data URL in the CSSSource contents may be included

If the full compiler cannot load, the fallback substitutes simple top-level variables and expands basic nested selectors. It skips at-rule processing and is not a replacement for Sass modules, mixins, functions, control directives, imports, or complete grammar validation.

Formula Core

Footprint values use UTF-8 byte counts for the current source and generated CSS. The displayed size delta is output bytes minus source bytes, so a negative result means the compiled CSS text is smaller.

ΔB=BCSS−Bsource

Source lines, non-empty lines, and longest-line length come from newline splitting. Rule-block counts use opening braces after block comments are removed; at-rule and Sass-feature counts use pattern matching. These values help compare runs but are not a semantic measure of stylesheet complexity.

Worked mechanism path

Given $brand: red; .a { color: $brand; } in SCSS mode, variable evaluation replaces $brand and expanded output produces an .a rule with color: red. That source contains one Sass variable; the emitted CSS contains one rule block. A project import or module directive would require the target project's own compiler and load paths instead.

Privacy and Compatibility Notes:

Stylesheet source, generated CSS, metrics, and downloads remain in the browser session. The page loads the compiler and chart code as external resources, but it does not send the stylesheet to a compilation service.

  • Do not share a source map with embedded contents unless the source stylesheet is safe to disclose.
  • Inline any required dependency; the browser compiler has no project load path.
  • Use current Dart Sass for production acceptance because LibSass is deprecated and frozen without modern language features.

References: