add class to each line of css with regex

Question

I want to add a class at the start of each line of my css

I want

.more {
    padding: 5px 10px 0;
}

#fbook {
    display: inline;
    float: left;
    margin: 0 0 0 4px;
    width: 320px;
}

to look like

.test .more {
    padding: 5px 10px 0;
}

.test #fbook {
    display: inline;
    float: left;
    margin: 0 0 0 4px;
    width: 320px;
}

something like this.

^([A-Za-z0-9]+)$

would work if my css looked like this

more
{
    padding: 5px 10px 0;
}

fbook
{
    display: inline;
    float: left;
    margin: 0 0 0 4px;
    width: 320px;
}

but I can't seem to get anything working when to find the . # {

Cylian · Accepted Answer · 2012-07-23 05:11:41Z

2

Try this

$result = preg_replace('/(?i)^([.#a-z]+\{)$/m', '.test $1', $subject);

Explanation

"
(?im)         # Match the remainder of the regex with the options: case insensitive (i); ^ and \$ match at line breaks (m)
^             # Assert position at the beginning of a line (at beginning of the string or after a line break character)
(             # Match the regular expression below and capture its match into backreference number 1
   [.#a-z]       # Match a single character present in the list below
                    # One of the characters “.#”
                    # A character in the range between “a” and “z”
      +             # Between one and unlimited times, as many times as possible, giving back as needed (greedy)
   \{            # Match the character “{” literally
)
\$             # Assert position at the end of a line (at the end of the string or before a line break character)
"

answered Jul 23, 2012 at 5:11

Cylian

11.2k4 gold badges46 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ak85 Over a year ago

thanks for your help I couldn't quite get this working but your detailed explanation has given me enough to go forward!

Kobi · Accepted Answer · 2012-07-23 05:27:34Z

1

You can use a modern tool like LESS. Simply take your code, and wrap it with .test{ }:

.test {
    .more {
        padding: 5px 10px 0;
    }

    #fbook {
        display: inline;
        float: left;
        margin: 0 0 0 4px;
        width: 320px;
    }
}

If you only need it one time, you can do it online: http://leafo.net/lessphp/#demo
If you want to do it from time to time, there are less libraries for many languages which you can use, and a client side JavaScript option.

answered Jul 23, 2012 at 5:27

Kobi

139k41 gold badges259 silver badges302 bronze badges

1 Comment

ak85 Over a year ago

I considered less but don't have much access in the system I am editing (only css access) so find and replace is the only way I can think of, but LESS will come in handy in the future I would say.

Collectives™ on Stack Overflow

add class to each line of css with regex

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related