如何使用 SASS 解析 .scss 文件中所有 CSS 选择器的列表？

Question

我想以编程方式解析 .scss 文件以生成该文件中使用的选择器的平面列表，主要作为一些静态代码分析的基础。

在 SASS 术语中，我正在寻找一种方法来获取给定 .scss 文件的所有 Sass::Tree::RuleNode 的列表。

到目前为止，我正在使用Sass::Engine.for_file 创建一棵树。然后，根据文档，为了在单个节点上使用Sass::Tree::RuleNode.resolved_rules，我必须使用Tree::Visitors::Cssize。但是在某处有一个（可能很简单）错误。

require 'sass'

sass_engine = Sass::Engine.for_file('files/examples.scss',{
  :style => :compact,
  :load_paths => ['files'],
  :syntax => :scss,
})

tree = sass_engine.to_tree

Sass::Tree::Visitors::Cssize.visit(tree)

tree.each do |node|
  if node.is_a? Sass::Tree::RuleNode
    puts node.resolved_rules
  end
end

这是我得到的错误和堆栈跟踪：

ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:186:in `visit_prop': undefined method `empty?' for nil:NilClass (NoMethodError)
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:37:in `visit'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:21:in `visit'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:53:in `map'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:53:in `visit_children'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:30:in `block in visit_children'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:52:in `with_parent'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:29:in `visit_children'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:37:in `block in visit'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:201:in `visit_rule'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:37:in `visit'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:21:in `visit'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:53:in `map'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:53:in `visit_children'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:30:in `block in visit_children'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:52:in `with_parent'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:29:in `visit_children'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:37:in `block in visit'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:65:in `visit_root'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:37:in `visit'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:21:in `visit'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/base.rb:24:in `visit'
    ruby-1.9.3-p362/gems/sass-3.2.10/lib/sass/tree/visitors/cssize.rb:6:in `visit'

非常感谢。

Answer 1

我对 Sass gem 代码库并不太熟悉，但通过遵循 sass gem 的 sass/tree/root_node.rb 中的 Cssize 类的代码示例，我能够使其正常工作（至少不会崩溃）文件，其中有：

  # Runs the dynamic Sass code *and* computes the CSS for the tree.
  # @see #to_s
  def render
    Visitors::CheckNesting.visit(self)
    result = Visitors::Perform.visit(self)
    Visitors::CheckNesting.visit(result) # Check again to validate mixins
    result, extends = Visitors::Cssize.visit(result)
    Visitors::Extend.visit(result, extends)
    result.to_s
  end

获取此代码 sn-p 并将其应用于您的脚本，我得到：

#!/usr/bin/env ruby

require 'sass'

sass_engine = Sass::Engine.for_file('files/examples.scss',{
  :style => :compact,
  :load_paths => ['files'],
  :syntax => :scss,
})

tree = sass_engine.to_tree

Sass::Tree::Visitors::CheckNesting.visit(tree)
result = Sass::Tree::Visitors::Perform.visit(tree)
Sass::Tree::Visitors::CheckNesting.visit(result)
result, extends = Sass::Tree::Visitors::Cssize.visit(result)
Sass::Tree::Visitors::Extend.visit(result, extends)

result.each do |node|
  if node.is_a? Sass::Tree::RuleNode
    puts node.resolved_rules
  end
end