我怎样才能遍历CSS类的子类？

Question

我有一个包含数百个16x16图标的CSS文件。它们使用CSS类/子类排列引用，如下所示：

<span class="icons icon_name"></span>

所以，如果我需要一个“向上箭头”图标，我只需编码：

<span class="icons arrow_up"></span>

等等。因为库中有很多图标，所以我创建了一个参考页面（在Haml中），因此我可以快速找到我需要的图标。 Haml代码的一个例子：

%div.icons.arrow_turn_right
    arrow_turn_right
    %br
%div.icons.arrow_undo
    arrow_undo
    %br
%div.icons.arrow_up
    ss_arrow_up
    %br

我觉得这是一种写作页面的相当强力的方法。 300个图标需要近1000行代码。

我的问题：有没有办法使用each循环（或类似的东西）迭代CSS类的子类？

这样的事情：

subs = mainCSSclass.allSubclasses   <--Replace this line with functional code
subs.each do |subclass|
  ... display the |subclass| ...
end

这样的事情可能吗？

编辑：以下是被引用的实际CSS文件的一部分：

.icons {
    display: inline;
    overflow: hidden;
    height: 16px;
    padding-left: 18px;
    background: url(icons.png) no-repeat; 
}

.accept {
    background-position: 0px 0px;
}

.add {
    background-position: 0px -19px; 
}

.anchor {
    background-position: 0px -37px;
}

.application {
    background-position: 0px -55px;
}

.application_add {
    background-position: 0px -73px; 
}

.application_cascade {
    background-position: 0px -91px; 
}

---

解决方案（感谢@ Corroded的回答）：

在我的pages_helper.rb中：

def read_css_cfg
  css_classes = Array.new
  file = File.new("public/stylesheets/blueprint/plugins/icons/icons.css", "r")
    while line = file.gets
      parsed = line.scan(/[.]\w+ {/).to_s.scan(/\w/).join
      css_classes << parsed if !parsed.blank?
    end
    file.close
  css_classes
end

在我的实际Haml文件中：

- parse = read_css_cfg
- parse.delete("icons")       #unrelated class, but in the same file'
- column = 1

.container
  - parse.each do |class_name|
    - case column
      - when 1
        <div class = "css_row">
        %div{:class => "icons #{class_name} three_column"}
          #{class_name}
        - column += 1
      - when 2
        %div{:class => "icons #{class_name} three_column"}
          #{class_name}
        - column += 1
      - when 3
        %div{:class => "icons #{class_name} three_column"}
          #{class_name}
        </div>
        - column = 1

最后，尽管这与原始问题无关，但我的最终答案包含自动生成3列“div-table”的代码。如果你对CSS使用DIV而不是表感兴趣，那么它就是：

.container {
  display: table;
  width: 675px;
}

.three_column {
  display: table-cell;
  width: 225px;
}

.css_row {
  display: table-row;

Answer 1

好的，基本上，计划是循环遍历所有这些类并在Haml页面中生成它们，对吗？

我要做的是打开CSS文件（当然使用Ruby），然后使用正则表达式来解析并获取所有子类。既然您想在视图中调用它，那么我建议使用帮助器：

def loadCSSClasses
    cssClasses = []
    cssFile = File.open("yourcssfile.css") do
        #Forgive me, my regular expression is weak, but basically you would want to get all the classnames after the word ".icon."
        cssClasses << className
    end
    cssClasses
end

然后在你的Haml文件中执行以下操作：

%ul
  - loadCSSClasses.each do |class_name|
    %li{:class => "icon #{class_name}"
      = "ss_#{class_name}"