SASS using variables from other mixins

[DAZ]

I'm playing around with a basic grid layout

@mixin grid($number-of-columns: 12)

@mixin column($width)
width: #{$width * 960/@number-of-columns}px

As you can see, I want the column mixin to have access to the $number-
of-columns variable that is set in the grid mixin

The idea would be to do something like this:

#container
+grid
#sidebar
+column(4)
#main
+column(8)

The columns *have* to be nested within a grid, is there anyway to
connect mixins in such a way?

cheers,

DAZ

[Nathan Weizenbaum]

The way this is often done is to put the grid and column mixins in their own partial (e.g. _grid.sass). In this file, you define a $number-of-columns variable at top-level using the !default flag. Then when you can optionally set $number-of-columns before you import the file, which will override the default. Here's an example: http://gist.github.com/526665

It's also worth noting that Sass variables can have units. This means that your width expression might be better written as "$width * 960px/$number-of-columns".

- Nathan

--
You received this message because you are subscribed to the Google Groups "Haml" group.
To post to this group, send email to ha...@googlegroups.com.
To unsubscribe from this group, send email to haml+uns...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/haml?hl=en.

[DAZ]

Thanks for the reply Nathan,

It's useful to know about the default flag and being able to override
it. That will help out a lot. My problem is, what if I want 2 grids
with different numbers of columns?

Is there a way to override the default setting for $number-of-columns,
multiple times?

I was hoping to use the grid mixin to do this. For example:

#grid1
+grid(12)
#content
+column(4)

#grid2
+grid(8)
#gallery
+column(4)

#content would be a third as big, because it is nested within a
grid(12), but #gallery would be half as big because it is nested
within a grid(8).

I hope that makes sense?

cheers,

DAZ

> > haml+uns...@googlegroups.com <haml%2Bunsu...@googlegroups.com>.

[Nathan Weizenbaum]

Currently there's not a great way to do this. In the next release, we plan to allow @imports to be scoped within a single selector, which will make it possible, if not necessarily elegant.

We welcome proposals as to how to make this work in a better way.

To unsubscribe from this group, send email to haml+uns...@googlegroups.com.

[DAZ]

How about nested mixins?

eg

=grid($cols:8,$width:960px,$gutter:20px)
=column($span:1)
width: $width/$span - $gutter
margin-left: $gutter

#content
+grid(8)
#sidebar
+column(3)
#main
+column(5)

Anything using the column mixin, must have a parent that uses the grid
mixin

Hope that is helpful, but not sure how possible it would be.

cheers,

DAZ

> > haml%2Bunsu...@googlegroups.com<haml%252Buns...@googlegroups.com>