Move You Existing Stylebase Over to Sass (or SCSS), Effortlessly With sass-convert.
This is Part 5 of my 5 part series: “From good to Great, 5 Things you didn’t know Compass could do.”
For some projects, starting from scratch in Sass/SCSS is a no go. A lot of time and effort might have been spent on an existing stylebase, and that might make dropping it all, and starting over from scratch cost prohibitive or frankly intimidating. When you install Sass, it comes with a handy command named sass-convert, which can actually convert an entire pre-existing CSS stylebase to Sass compliant (or SCSS compliant) syntax, quite simply! Here are the options available for the sass-convert command:
Usage: sass-convert [options] [INPUT] [OUTPUT] Description: Converts between CSS, Sass, and SCSS files. E.g. converts from SCSS to Sass, or converts from CSS to SCSS (adding appropriate nesting). Options: -F, --from FORMAT The format to convert from. Can be css, scss, sass, less, or sass2. sass2 is the same as sass, but updates more old syntax to new. By default, this is inferred from the input filename. If there is none, defaults to css. -T, --to FORMAT The format to convert to. Can be scss or sass. By default, this is inferred from the output filename. If there is none, defaults to sass. -R, --recursive Convert all the files in a directory. Requires --from and --to. -i, --in-place Convert a file to its own syntax. This can be used to update some deprecated syntax. --dasherize Convert underscores to dashes --old Output the old-style ":prop val" property syntax. Only meaningful when generating Sass. -C, --no-cache Don't cache to sassc files. -s, --stdin Read input from standard input instead of an input file --trace Show a full traceback on error -?, -h, --help Show this message -v, --version Print version
I especially enjoy the —recursive and —in-place options that are available to you from the sass-convert command, but beware, if you do an —in-place conversion, it will not update the filetypes, so you’ll have to do that yourself. This isn’t a horrible issue since it gives you an excuse to review and learn how sass converted over your pre-existing files, but either way, I recommend making a copy of the stylebase, and doing your conversion there.