I was writing some large blocks of repetitive text in SCSS. Had some colors defined, and we wanted to group them in color-ranges, like this.
So we started with with:
$green-50: #f1fdf6;
$green-100: #dcf5e7;
$green-200: #b3e6c8;
$green-300: #75d09b;
$green-400: #37b96d;
$green-500: #1aaa55;
$green-600: #168f48;
$green-700: #12753a;
$green-800: #0e5a2d;
$green-900: #0a4020;
$green-950: #072b15;
We want to remove the values so we just have a list of names
Find: :.*$
Replace: ,
Replace everything from the colon to the end of the line with ,
Manually wrap it in parenthesis so it looks kinda like a SASS Map:
$theme-greens: (
$green-50,
$green-100,
$green-200,
$green-300,
$green-400,
$green-500,
$green-600,
$green-700,
$green-800,
$green-900,
$green-950
);
Wanted to make it look like this:
$greens: (
"50": $green-50,
"100": $green-100,
"200": $green-200,
"300": $green-300,
"400": $green-400,
"500": $green-500,
"600": $green-600,
"700": $green-700,
"800": $green-800,
"900": $green-900,
"950": $green-950
);
Find: (\$.*-(\d+))(,|$)
Replace: "$2": $1$3
$1 is the original value (e.g. $green-100)
$2 is the number, which we wrap in quotes
$3 is either comma or end-of-line