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
-~----------~----~----~----~------~----~------~--~---
