How to target all scss variables which is used for styling with regex

Question

Hi i want to target all the scss variables which is used for styles

Question: i want to target all the scss variables which comes after : with $name it might come inside ($name) as shown in below image (red color highlight)

My Expectation is shown in below image(red color highlight):

From above image i want to highlight all the red color marked variables

here is what i have tried

(:)(\s+\$+.*;)

Which fails so many test cases

Demo: https://regex101.com/r/WtyoF6/1

Request: please include any other testcases if you know.

Please help me thanks in advance !!!!

@Pieterjan ,it is working for some more test cases then the asked question but fails for `$primary-color: darken($primary-color, 60%);` and some others — EaBengaluru, Sep 18 '22 at 06:51
What it the tool or language and what are the examples of "some others"? — The fourth bird, Sep 18 '22 at 09:45
@Thefourthbird it is not working with all the testcases i,e what i meant by some other you can see here https://regex101.com/r/tGz2P0/1 — EaBengaluru, Sep 18 '22 at 13:30
@EaBengaluru Perhaps something like this? `(?<=:[^$\n]*)\$[^$;\n]*;` https://regex101.com/r/ONUihs/1 — The fourth bird, Sep 18 '22 at 13:51
@Thefourthbird sorry for late reply, now highlight is happening for all test cases but it should highlight only $variables as shown in image https://ibb.co/SV53qWY — EaBengaluru, Sep 19 '22 at 04:38
@AaronMeese sorry for that here is the updated link https://ibb.co/Bq3S5tb — EaBengaluru, Oct 02 '22 at 06:18
Please add a language tag, this is only for Javascript? Thought of [e.g. this (pcre demo)](https://regex101.com/r/ISkyY5/1) — bobble bubble, Oct 09 '22 at 13:02

score 2 · Answer 1 · answered Oct 05 '22 at 21:53

There is no tool or language listed, but for the example data, if a quantifier in a lookbehind assertion is supported:

(?<=:[^:$\n]*)\$\w+(?:-\w+)*

Explanation

(?<= Positive lookbehind, assert what is to the left is
- :[^:$\n]* Match : followed by optionally repeating any char except : $ or a newline
) Close the lookbehind assertion
\$\w+(?:-\w+)* Match $ 1+ word chars and optionally repeat matching - and 1+ word chars

Regex demo

Or else with a capture group:

(?::[^:$\n]*)(\$\w+(?:-\w+)*)

Regex demo

Aaron Meese · Answer 2 · 2022-10-12T00:39:38.937

1

If you are looking for all occurrences of SCSS variables that are being used, this will work for you:

:.*(\$[a-zA-Z-]+)

A demo can be found here.

edited Oct 12 '22 at 00:39

answered Oct 01 '22 at 19:22

Aaron Meese

1,670
3
22
32

it solves almost 90% of the problem https://regex101.com/r/w4SY89/1 – EaBengaluru Oct 02 '22 at 05:12
I don't understand what you mean, it would be helpful if you updated your question with everything you want highlighted – Aaron Meese Oct 02 '22 at 12:43
it must match all variables according to this https://ibb.co/Bq3S5tb . even edited the question – EaBengaluru Oct 03 '22 at 04:49
i have edited my question and even opened bounty of 50 please have a look – EaBengaluru Oct 05 '22 at 03:57
My answer highlights exactly what you ask for, I'm not sure what else you want. Every single capture group is identical to your picture – Aaron Meese Oct 05 '22 at 11:45
variable can't be start with number `$3color` – AbdullahSaidAbdeaaziz Oct 12 '22 at 00:24

score 1 · Accepted Answer · answered Oct 07 '22 at 09:25

Using this answer as a reference for the valid SASS/SCSS variable characters the following regex should match all* valid SASS/SCSS variables:

(\$(?![0-9])(?:[a-zA-Z0-9-_\u0080-\uD7FF\uE000-\uFFFD]|(?:\\[!"#$%&'\(\)*+,.\/:;<=>?@\[\]^{|}~]))+)

Explaination

( capturing group around the whole SASS variable name
- \$ starts with a $
- (?![0-9]) negative lookahead - the first character cannot be a number
- (?: non-capturing group of the valid characters
  - [a-zA-Z0-9-_\u0080-\uD7FF\uE000-\uFFFD] any letter, number, dash, underscore, or characters with the ranges 0080 to D7FF, E000 to FFFD (the range 10000 to 10FFFF is missing because the regex engine won't accept it as a valid range)
  - | or
  - (?: non-capturing group of special characters that are escaped buy a \
    - \\ back-slash
    - [!"#$%&'*+,.\/:;<=>?@\[\]^{|}~] any of these special characters
  - )
- )+ one or more of the valid characters
)

* Any characters in the range 10000 to 10FFFF won't match as the regex engine won't accept this as a valid range.

Demo

score 1 · Answer 4 · answered Oct 08 '22 at 11:43

1

This regex will exactly find all the red highlighted values in your example (see this demo):

(?<=:[^$\n]*)(\$[^\s:;,]*)

Or if you prefer to avoid the positive lookbehind, use the first capturing group from here (see this demo):

(?::[^$\n]*)(\$[^\s:;,]*)

answered Oct 08 '22 at 11:43

Steve Chambers

37,270
24
156
208

score 0 · Answer 5 · answered Oct 08 '22 at 03:46

(:)(.+)(\$.+((,)))|(:)(.+)(\$.+((\s)))|(:)(.+)(\$.+(([;])))

In my hack above, I match everything that comes after : until space\s, comma,, or semicolon; and then differentiate the appropriate $name in the $3 of $1$2$3$4.

So, if you need to replace the $name you will use $1$2$3$4 and change the $3 to what you need to replace it with.

Demo

How to target all scss variables which is used for styling with regex

5 Answers5