parsing - 词法分析和解析 CSS 层次结构

Question

.someDiv { width:100%; height:100%; ... more properties ... }

我将如何在我的解析器中制定与上面的字符串匹配的规则？

对我来说似乎不太可能，因为您不能在规则中定义无限数量的属性？有人可以澄清一下，你会如何用 FsLex 做这样的事情吗？和 FsYacc ?

Answer 1

如果您使用 FsLex 和 FsYacc，那么您可以解析 { ... } 中的属性作为属性列表。假设您有一个可以正确识别所有特殊字符的词法分析器，并且您有一个解析单个属性的规则，您可以编写如下内容:

declaration:
  | navigators LCURLY propertyList RCURLY { Declaration($1, $3) }
  | navigators LCURLY RCURLY              { Declaration($1, []) }

propertyList:
  | property SEMICOLON propertyList    { $1::$2 }
  | property                           { [$1] }

property:
  | IDENTIFIER COLON values            { Property($1, $3) }

declaration规则解析整个声明(您需要为可以在 CSS 中使用的各种导航器编写解析器，例如 div.foo #id 等) propertyList rule 解析一个属性，然后递归调用自身来解析多个属性。

右侧构造的值将是代表单个属性的值列表。 property规则解析单个属性分配，例如 width:100% (但您需要完成值的解析，因为它可以是一个列表或更复杂的表达式)。