About

This tool automates the tedious process of migrating from the older, indentation-based Sass syntax to the modern, standard SCSS (Sassy CSS) syntax. While Sass relies on whitespace and newlines to define scope, SCSS uses curly braces { } and semicolons ;, making it fully compatible with standard CSS.

The converter parses your code line-by-line, calculating indentation depth d to reconstruct the nesting logic. It automatically translates shorthand operators: the mixin definition = becomes @mixin, and the include operator + becomes @include. It intelligently distinguishes between CSS properties (which require semicolons) and nested selectors.

Formulas

The core logic tracks the indentation level L of each line to determine block structure.

If L_next > L_current &implies; Open Block {

If L_next < L_current &implies; Close Block(s) }

Shorthand translation rules apply regular expression mapping:

replace(^=, @mixin ) and replace(^+, @include )

Reference Data

Feature	Sass (Indented)	SCSS (Standard)
Nesting	Indentation based	Braces { ... }
Line End	Newline	Semicolon ;
Mixin Definition	=my-mixin	@mixin my-mixin
Mixin Include	+my-mixin	@include my-mixin
Variables	$color: red	$color: red;
Extend	@extend .error	@extend .error;
Import	@import "reset"	@import "reset";

Frequently Asked Questions

Yes. The converter detects indentation changes. If a property like "font:" is followed by indented lines (e.g., 'family: Helvetica'), it will correctly wrap them in braces.

Standard single-line comments // are preserved. Block comments /* */ are also maintained. The tool attempts to keep comments in their relative positions during the conversion.

The converter uses a heuristic to distinguish selectors from properties. If a line looks like a selector (e.g., pseudo-classes) but doesn't start a block, it might occasionally be ambiguous. However, for standard CSS properties, semicolons are automatically appended.

This tool is strictly Sass (Indented) to SCSS. SCSS is a superset of CSS, so converting back involves removing braces and enforcing strict indentation, which is a different process.