sed find replace regex repacing CSS transition with a mixin

Question

I have 12k lines of SCSS code and I need to replace all CSS transitions like this:

transition: background .3s ease;

or

-webkit-transition: background .3s ease;

with a SASS mixin

@include _transition(background .3s ease);

After lots of research I've end up with a sed command like this

sed -i '' 's/transition: ([a-zA-Z0-9.]*);/@include _transition\((\1)\);/' *

But of course it doesn't work. I'm using a Mac and the error I get is:

sed: 1: "s/transition: ([a-zA-Z0 ...": \1 not defined in the RE

Please help!

Avinash Raj · Accepted Answer · 2014-09-18 16:55:08Z

2

You need to add space inside the character class and you don't need to escape ( , ) in the replacement part. Normal sed uses BRE(Basic regular expression) so the capturing group must be like \(blah blah\) not like (blahblah)

sed 's/transition: \([a-zA-Z 0-9.]*\);/@include _transition(\1);/g' file

Example:

$ cat file
transition: background .3s ease;
foo
$ sed 's/transition: \([a-zA-Z 0-9.]*\);/@include _transition(\1);/g' file
@include _transition(background .3s ease);
foo

edited Sep 18, 2014 at 16:55

answered Sep 18, 2014 at 16:45

Avinash Raj

175k32 gold badges247 silver badges289 bronze badges

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

3 Comments

David Over a year ago

I don't think it works for the second example. I get this: -webkit-@include _transition(background .3s ease);

Tomasz Jureczko Over a year ago

@AvinashRaj You're awesome and your answer is awesome. It works.

Tomasz Jureczko Over a year ago

@David You're right. I made it work that way that firstly I've run sed which replaced all -webkit prefixed transitions, then second one to replace not prefixed ones.

Collectives™ on Stack Overflow

sed find replace regex repacing CSS transition with a mixin

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related