Refactor multiple SASS properties at once

Whilst working on a project, we noticed a SASS upgrade started throwing a lot of deprecation notices:

DEPRECATION WARNING on line 3 of /app/assets/stylesheets/css_table.css.sass:
Old-style properties like ":float left" are deprecated and will be an error in future versions of Sass.
Use "float: left" instead.

Simple enough if there are one or two, but updating thousands of properties doesn’t sound like fun.

Using VSCode, open a file or project based Find & Replace. Make sure you have selected the .* button.

Add this to the find dialog:

^(\s+)(:)(\w+-?\w+)

Add this to the replace dialog:

$1$3:

And hit the replace or replace-all button. Done!

The regex does the following:

• Find lines starting with some whitespace, and match it.
• Identify any :’s and match them too (probably not needed).
• Find any words that may or may not be hyphenated, and match them as well.

The replace does the following:

• First replace with the matched whitespace ($1)
• Then replace with the matched word ($2)
• Then add a : after the word.