Regex to add a hierarchy level to all CSS rules

Asked

Viewed 44 times

1

I don’t have much knowledge about regex (I don’t think anyone fully understands this) and would like to make a regular expression to change a CSS file by placing a hierarchy level (a class called "myClose" for example) in all rules, as follows:

Current code

div {
   width: 100%;
   border: 5px solid #F00;
}

.botao-vermelho {
   background: #F00;
}

div .botao-vermelho {
   color: #000;
}

Desired code

.minhaClasse div {
   width: 100%;
   border: 5px solid #F00;
}

.minhaClasse .botao-vermelho {
   background: #F00;
}

.minhaClasse div .botao-vermelho {
   color: #000;
}

the css file is quite extensive and it is not feasible to do this at hand

css regex
  • 1

    Search for LESS or SASS. Forget about this where you are talking. Advice: forget.

  • 1

    @Peterparker Ué if it’s just a small edition is fine. Editing files with regex is always a useful skill.

  • 2

    The most important thing you have to understand about Regex is that the name is not random: "expressions regular". In most cases where it is well used, it was only used because it has no simpler way with string operations. For repetitive things, Regex can be a good one, because then you don’t miss the overhead of the compilation for nothing. In compensation, here at Sopt I see used in excess in things that are not case for Regex.

1 answer

1


The Pattern you are looking for is

(.+) {

Replace with

.minhaClasse \1 {

  • I needed one / before the { no Find&replace of the Sublime, but it worked just fine, thank you!

Browser other questions tagged css regex

You are not signed in. Login or sign up in order to post.