css - 疯狂的正则表达式 : append previous CSS selector

Question

一种流行的 CSS 编写方式是这样的:

#report-page aside.sidebar {
  …
}

  #report-page aside.sidebar li {
    …
  }

    #report-page aside.sidebar li a {
      … 

写这个很乏味。我想尝试自动化重复的部分。 (像 LESS 这样的预处理器解决了这个问题，但我不能在这个现有的应用程序中使用它。)

Espresso.app 可以插入动态文本片段:

    <!-- The matched suffix allows you to capture information about the text 
         preceding the insertion point. Specify a regular expression here. -->
    <matched-suffix>(\s+)(is a vegetable)?</matched-suffix>

    <!-- The transform-into element is a regex replacement expression, and can use 
    the captured strings from matched-suffix to generate a conditional snippet. -->
    <transform-into>(?2:\1is a vegetable:\1is fantastic and )</transform-into>

你能帮我写一个正则表达式来查找前一个大括号 {，并返回该行中它之前的任何内容，不包括制表符和空格吗？

Answer 1

Preprocessors like LESS solve this, but I can’t use it in this existing app.

是的，你可以。你的元素/框架不必支持它，你也不必重写整个css。

例如 scss 的语法完全支持 css 的语法，因此您只需将 .css 文件重命名为 .scss 就可以了。之后就可以开始使用 scss 语法了。

见 http://sass-lang.com/

sass/scss 工具有一个 --watch 开关，允许您在后台运行它并在每次修改文件时自动将您的 .scss 文件转换为 .css 文件，同时进行开发:

sass --scss --watch file.scss:file.css

如果您更喜欢 sass 语法，sass 附带一个 sass-convert 工具，可以在 css、scss 和 sass 格式之间进行转换:

sass-convert --from css --to sass file.css file.sass

---

对于你的正则表达式问题，试试这个:

\s*([^\s].*?)\s*{

这将匹配选择器，选择器前后没有空格/缩进。