Css Code Action

A vscode extension help editing scss/less file with color replace and px convert.

ejs render context:

{
  _VAR_NAME_: 'color and size var name defined in variablesFile',
  _MATCHED_TEXT_: 'origin text matched by regex',
  _REM_RESULT_: 'rem result converted from px value based on rootFontSize, only in `colorReplaceOptions`'
}

Color Replace

color replace help replace hex css string to color variable defined in (scss/less) file.

{
  "cssAction.variablesFile": "src/style/variables.scss",
  "cssAction.colorReplaceOptions": ["<%= _VAR_NAME_ %>"]
}

Px convert

px convert help convert px to sccc/less func or auto calc based on root font size.

{
  "cssAction.rootFontSize": 16,
  "cssAction.pxReplaceOptions": ["<%= _VAR_NAME_ %>", "<%= _REM_RESULT_ %>", "px2rem(<%= _MATCHED_TEXT_ %>)"]
}