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]

  Converts between CSS, Sass, and SCSS files.
  E.g. converts from SCSS to Sass,
  or converts from CSS to SCSS (adding appropriate nesting).

    -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.

blog comments powered by Disqus
  1. perezium posted this