About the CSS to SASS Converter
The indented Sass syntax drops braces and semicolons and uses indentation to express structure, which makes a converted file noticeably shorter than the CSS it came from. This converter parses your stylesheet into a rule tree, then prints it in that layout with the indent width you choose. Tabs and spaces both work, but the file has to be consistent throughout, so pick one and let the tool apply it everywhere.
Nesting is where most of the value is. When a rule such as .pricing .amount follows a rule for .pricing, the child is moved inside the parent and its selector is shortened. A rule such as .pricing:hover becomes &:hover, using the parent reference that Sass provides. Turn nesting off and you get a flat file with the same selectors you started with, which is sometimes what you want for a first commit.
Colour extraction scans declarations for hex, rgb() and hsl() literals, and any value used more than once becomes a $color-1 style variable declared at the top. Custom properties are deliberately skipped, because a Sass variable placed inside a --name declaration is written out literally rather than resolved. Comments are dropped during parsing. To go the other way, the SASS Compiler turns the result back into CSS, and CSS to SCSS produces the braced dialect instead.
How to use
- Paste your stylesheet into the left pane or drop a .css file onto it.
- Choose an indent width, and decide whether descendant rules should be nested and repeated colours turned into variables.
- Copy the Sass or download it as a .sass file. Swap sends the result to the compiler so you can check it round trips.
Common questions
- What is the difference between .sass and .scss?
- They are the same language with two spellings. SCSS keeps CSS braces and semicolons, while the indented .sass syntax replaces them with indentation and newlines.
- Are my comments kept?
- No. Comments are stripped while the stylesheet is parsed, so add any licence header back by hand after converting.
- Why was a colour I use twice not turned into a variable?
- Uses inside custom property declarations are not counted, because Sass does not interpolate variables into a --name value without explicit interpolation syntax.
- Does it handle media queries?
- Yes. An @media block is printed as an indented block containing its rules, which is valid in the indented syntax.