When using Zen and Zen grids, where do I put SASS variables?

Question

I am trying to use Zen Grids with the Zen ver. 5 starter theme.

The Zen starter theme comes with a lot of .scss files (in the sass/ subdirectory). I am trying to use Zen Grids to set up a simple layout. I've read up on Sass and think I understand the concept, and I've Compass installed and working.

I've read everything on the Zen Grids website. On the front page of that website, below the promising headline: "Using Zen Grids is easy!", there is a nice introduction to Sass and Zen Grids followed by: "And here’s the complete Sass code:".

The example is strightforward enough. What I am not able to figure out is where (as in "in what file") you put the statements used in the example.

(My setup is a Zen sub-theme created from the Zen STARTERKIT, straight out of the box.)

Answer 1

If you use the Zen STARTERKIT ver. 5, Sass configuration variables and Sass mix-ins similar to those you link to on the Zen Grids website is already in place in the file named responsive-sidebars.scss.

So to create a responsive design by means of Zen Grids, you don't add these anywhere, as they're already in place. But if you want to change them to other values, you do so by simply editing responsive-sidebars.scss in your starterkit sub-theme.

Note that most of the selectors used in the example on the Zen Grids website (e.g. .aside1) will not do anything in Zen (unless you also change the corresponding template file). You can see from responsive-sidebars.scss what selectors to use (e.g. .region-sidebar-first).

Answer 2

In the Zen theme structure there are several main style files: pages.scss, nodes.scss, blocks.scss, forms.scss. Depend on which part of website that you want to make styles. You have to choose the correct files for changing. In order to use the sample code in the Zen Grids . You can go to pages.scss and make changes here . Make sure that your website will generate the same HTML markup structure like the sample by creating new pages.tpl.php.