Thanks everyone. I was already familiar with what had been done with Compass and I like how that works, but I was specifically trying to set up some lightweight Sass that worked with a few fixed parameters. I didn't actually want as much variance as Compass allowed.
With that being said, I liked the solution Nathan proposed and have modified my Sass to the following: =container margin-left: auto margin-right: auto width: 960px =alpha margin-left: 0 =omega margin-right: 0 =grid_content display: inline float: left margin-left: 10px margin-right: 10px =grid_(!i) width = (!i * 60) - 20 + "px" +grid_content =prefix_(!i) padding-left = (!i * 60) + "px" =suffix_(!i) padding-right = (!i * 60) + "px" Thanks again for everyone's help and suggestions! On Aug 21, 2:16 am, Nathan Weizenbaum <[email protected]> wrote: > Why not make the int a parameter to the mixin? > > =grid(!i) > width = (!i * 60) - 20 + "px" > > =prefix(!i) > padding-left = (!i * 60) + "px" > > =suffix(!i) > padding-right = (!i * 60) + "px" > > On Thu, Aug 20, 2009 at 8:13 AM, Shawn Allison <[email protected]>wrote: > > > > > Is it possible to use @if in Sass to iterative a series of mix-ins? > > > I'm attempting to create a sass 16-column grid system based upon > > 960.gs. Ideally I don't want to use a bunch of class names for each > > grid (ie, .grid-1, .grid-2, etc,) but instead have a series of mix-ins > > I can load. > > > Here is what I have so far using class names. If I try to change it to > > mix-ins, it breaks horribly. (ex. .grid-1 to =grid-1) > > > =container > > margin-left: auto > > margin-right: auto > > width: 960px > > =alpha > > margin-left: 0 > > =omega > > margin-right: 0 > > > .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, > > .grid-8, > > .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, > > .grid-16 > > display: inline > > float: left > > margin-left: 10px > > margin-right: 10px > > > @for !i from 1 through 16 > > .grid-#{!i} > > width = (!i * 60) - 20 + "px" > > > @for !i from 1 through 15 > > !edge = (!i * 60) + "px" > > .prefix-#{!i} > > padding-left = !edge > > .suffix-#{!i} > > padding-right = !edge > > > Is what I want to do even possible? I am a front-end guy, not really a > > developer, so I may have this all wrong or I'm missing something > > obvious. > > > At this point, doing it with class names works just fine. I'd just > > rather have it as mix-in's so I can cut down on having to edit the > > Haml mark up as much. > > > Thanks in advance for any help and advise! > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Haml" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/haml?hl=en -~----------~----~----~----~------~----~------~--~---
