regex para adicionarumníveldehierarquia em todas as regras CSS

Question

我想在sublime的“查找和替换”中使用正则表达式来为所有css规则添加层次结构级别（例如，名为“myClass”的类）。

当前代码

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

.red-button {
   background: #F00;
}

div .red-button {
   color: #000;
}

我需要什么

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

.myClass .red-button {
   background: #F00;
}

.myClass div .red-button {
   color: #000;
}

css文件太大，我认为正则表达式可以帮助

Answer 1

描述

^([^\n{]+\{)

替换为： .myClass $1

实施例

现场演示

https://regex101.com/r/aG2tJ2/1

示例文字

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

.red-button {
   background: #F00;
}

div .red-button {
   color: #000;
}

替换后

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

.myClass .red-button {
   background: #F00;
}

.myClass div .red-button {
   color: #000;
}

解释

NODE                     EXPLANATION
----------------------------------------------------------------------
  ^                        the beginning of a "line"
----------------------------------------------------------------------
  (                        group and capture to \1:
----------------------------------------------------------------------
    [^\n{]+                  any character except: '\n' (newline),
                             '{' (1 or more times (matching the most
                             amount possible))
----------------------------------------------------------------------
    \{                       '{'
----------------------------------------------------------------------
  )                        end of \1
----------------------------------------------------------------------