How can I iterate through a CSS class' subclasses? - ruby-on-rails

Question

I have a CSS file which contains several hundred 16x16 icons. They are referenced using a CSS class/subclass arrangement, like so:
<span class="icons icon_name"></span>
So, if I need an "arrow up" icon, I simply code:
<span class="icons arrow_up"></span>
And so on. Because there are so many icons in the library, I created a reference page (in Haml), so I could quickly find which icon I need. An example of the Haml code:
%div.icons.arrow_turn_right
arrow_turn_right
%br
%div.icons.arrow_undo
arrow_undo
%br
%div.icons.arrow_up
ss_arrow_up
%br
It occurs to me that this is a rather brute force method to writing the page. 300 icons require nearly 1000 lines of code.
My question: Is there a way to iterate through a CSS class' subclasses using an each loop (or something similar)?
Something like this:
subs = mainCSSclass.allSubclasses <--Replace this line with functional code
subs.each do |subclass|
... display the |subclass| ...
end
Is such a thing possible?
Edit: Here is a partial of the actual CSS file being referenced:
.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;
}
Solution (thanks to #Corroded's answer):
In my 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
In my actual Haml file:
- 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
Finally, though this has nothing to do with the original question, my final answer contained code which auto-generated a 3-column "div-table." If you're interested in the CSS to use DIV's instead of a table, here it is:
.container {
display: table;
width: 675px;
}
.three_column {
display: table-cell;
width: 225px;
}
.css_row {
display: table-row;

Answer 1

Okay, so basically, the plan is to loop through all those classes and generate them in a Haml page, right?
What I would do is open that CSS file (using Ruby of course) and then use a regular expression to parse and get all the subclasses. Since you would want to call that in a view, then I suggest using a helper:
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
Then in your Haml file do this:
%ul
- loadCSSClasses.each do |class_name|
%li{:class => "icon #{class_name}"
= "ss_#{class_name}"