regex101: scss class matching

Pro

Positive Lookahead(?=([\.]{1}[a-zA-Z_]+[\w\_\-]*)[\s\.\+\{\>#\:]{1})

Group 1([\.]{1}[a-zA-Z_]+[\w\_\-]*)

Character Class[\.]{1}

{1}matches one character from the set below:

\.the literal . (46₁₀ / 56₈ / 2E₁₆)

Character Class[a-zA-Z_]+

+matches at least one character from the set below:

a-zone character from a (97₁₀) to z (122₁₀) (case sensitive)

A-Zone character from A (65₁₀) to Z (90₁₀) (case sensitive)

_the literal _ (95₁₀ / 137₈ / 5F₁₆)

Character Class[\w\_\-]*

*matches any number of characters from the set below:

\wany word character

\_the literal _ (95₁₀ / 137₈ / 5F₁₆)

\-the literal - (45₁₀ / 55₈ / 2D₁₆)

Character Class[\s\.\+\{\>#\:]{1}

{1}matches one character from the set below:

\sany whitespace character

\.the literal . (46₁₀ / 56₈ / 2E₁₆)

\+the literal + (43₁₀ / 53₈ / 2B₁₆)

\{the literal { (123₁₀ / 173₈ / 7B₁₆)

\>the literal > (62₁₀ / 76₈ / 3E₁₆)

#the literal # (35₁₀ / 43₈ / 23₁₆)

\:the literal : (58₁₀ / 72₈ / 3A₁₆)

Global pattern flags

g modifier: global. Finds all matches instead of stopping after the first

m modifier: multiline. Causes ^ and $ to match the start and end of each line, not only the start and end of the string

25 tokens

Regular Expression

(?=([\.]{1}[a-zA-Z_]+[\w\_\-]*)[\s\.\+\{\>#\:]{1})

.aClass.foo.bar .qwerty {
    border-bottom: 1px solid color.get('primary');
    padding: .5em;
    background-color: color.get('background');
    
    .foo>.bar {
        background-image: url("paper.gif");
    } 
    
    .aCamelCaseClass {

    }

    #anIdThatShouldNotBeMatched {
    }

    .foo > .bar {
        background-image: url("paper.gif");
    } 
    
    .qwe+.rew>.qwe{ }

    .qwe:hover
    {
    }
}

Substitution

.aClass.foo.bar .qwerty {
    border-bottom: 1px solid color.get('primary');
    padding: .5em;
    background-color: color.get('background');
    
    .foo>.bar {
        background-image: url("paper.gif");
    } 
    
    .aCamelCaseClass {

    }

    #anIdThatShouldNotBeMatched {
    }

    .foo > .bar {
        background-image: url("paper.gif");
    } 
    
    .qwe+.rew>.qwe{ }

    .qwe:hover
    {
    }
}