Changing $zen-column-count for individual breakpoints does not work. Once it's set, it cannot be updated. All breakpoints remain at the initial grid size.

For example, in sass/layouts/_responsive.scss
$zen-column-count is declared at the top outside of any media queries. Then it is set again within each breakpoint to create different grid sizes per breakpoint.

But the grid size does not change from the initial declaration. (Likewise for $zen-gutter-width)

What is the method for changing the zen-column-count per breakpoint? The method shown in _responsive.scss does not work.

zen-5.6
sass (3.4.19)
zen-grids (2.0.1)
compass (1.0.3)
compass-core (1.0.3)
compass-import-once (1.0.5)

Comments

jmljunior created an issue. See original summary.

arnoldbird’s picture

arnoldbird CreditAttribution: arnoldbird commented

I can confirm that $zen-column-count does not work. Neither does $zen-columns. In fact, most variables cannot be set outside of _init.scss, it seems.

This part of the compass docs seems relevant: "Many compass modules use guarded assignment to allow you to set defaults for that module. In order for these configurable variables to work correctly, you must set the variables before you import the module." (http://compass-style.org/help/tutorials/configurable-variables)

A workaround for the column count is to declare the count in every zen-grid-item declaration, for example...
@include zen-grid-item(3, 1, left, 5);

To fix the underlying problem, non-working variable declarations should be removed from files like like _responsive.scss so the theme does not create the expectation that it's possible to set variables in these locations.

arnoldbird’s picture

arnoldbird CreditAttribution: arnoldbird commented
Status: Active » Closed (works as designed)

It looks like you can set $zen-column-count per breakpoint if you use the global flag, which is necessary since Sass 3.4. For example...

$zen-column-count: 5 !global;