How to find and replace file values while reusing parts of the values?-CodePudding

I want to change thousands of hard coded CSS pixel values to a variable that re-uses the value, such that if the value is height: 100px; then the new value would be height: calc(100px / var(--resoRatio);. And I need to account for lines that contain 'px' multiple times.

For each line
   for each 'px'
       move to the left until either a ':', ',' or ' ' (space) is identified
       select the remaining value along with 'px' starting from first detected colon, comma or space
       store selection in variable X
       replace content after ':' with 'calc(X / var(--resoRatio))'

Could this be done with Visual Studio Code find and replace with regex?

CodePudding user response：

Do a regex search for

height:\s*(\d px)

if you have fractionally sizes (100.3px) use

height:\s*([\d.] px)

replace with

height: calc($1 / var(--resoRatio))

Edit

If you want generic attributes you can apply multiple times use

(\w )\s*:\s*(\d px)

replace with

$1: calc($2 / var(--resoRatio))