开发者

How can I iterate through a CSS class' subclasses?

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;


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}"
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜