Vue.js Sass 2.0 Slash Division Migration Helpers

sass-math-div.code-snippets.json

{
  "Vue sass division wrap": {
    "prefix": "mathdiv",
    "body": ["math.div($TM_SELECTED_TEXT)"],
    "description": "Wrap selection with math.div() to address deprecated sass division syntax"
  }
}

slash-div-to-math.md

Step 1 - Vue Single File Component (SFC) usage

the sass-migrator can't process .vue files so you have to do it manually. Use a global regex search in VScode to make it easer.

To find all uses of division using '/' in your Vue SFCs:

style lang="(scss|sass)"(.|\n)*?\/ ($|[0-9])

This will identify the first usage of slash division in any .vue file. Head over to each file and make the updates in step 2.

Step 2 - Import sass:math and wrap with math.div(...)

In each file you need to:

1. add @use 'sass:math'; to the start of the <style lang="s(c|a)ss">...</style> section.
2. wrap the deprecated syntax with math.div(...). You can add the included vscode snippet to your user snippets and then use the command pallette (cmd + shift + p) once the text is highlighted.

For example:

// Before
margin: -$gutter / 2;

// After
margin: math.div(-$gutter / 2);

Step 3 - Regex replace all slashes inside math.div(...)

regex search:

math.div\(([\w\-\$]+)\s*([/])(\s*[\w\-\$]*)\s*\)

Note: This only supports variable names and integers. It would have to be modified to support floats and other unit types.

regex replace:

math.div($1,$3)

Results:

- margin: math.div(-$gutter / 2);
+ margin: math.div(-$gutter, 2);