compass responsive quirks

gistfile1.txt

/*  Imports
------------------------------------------------------------------------------------------------------ */

@import "partials/base";
@import "blueprint";
@import "compass/typography/vertical_rhythm";

/*  >1220px
------------------------------------------------------------------------------------------------------ */

@media screen and (min-width: 1220px) {
    // grid
    $blueprint-grid-columns: 24;
    $blueprint-grid-width: 25px;
    $blueprint-grid-margin: 25px;
    // baseline
    $relative-font-sizing: false;
    $base-font-size: 16px;
    $base-line-height: 24px;
    @include establish-baseline(16px);
    // grid applied
    div.container {
        @include container; // WRONG WIDTH ... WHY ???
    }
    section#teaser {
        @include column(24, true);
        article {
            @include column(18, true); // RIGHT WIDTH ... YES!!!
            @include prepend(6); // WRONG MARGIN ... WHY ???
        }
    }
}

Variable scoping is a feature of how sass works. Changing that would affect every sass stylesheet ever written. Susy did some restructuring of their code to allow late binding/lookup of derived values. which makes this sort of use work better but still not perfect.

In terms of your resistance to % units, you'll need to get over that unless you want to take the path described in my blog post, it's pretty fundamental to RWD.

What you say you want to accomplish, you can do if you follow the steps in my blog post.

thanks chris – I´ve thoroughly checked your posting (which took a while) and I really like it ... until the point where I need to add the markup to my templates.

my workaround for now: define some mixins (in base.scss) for calculating the grid, including the nr of cols, the grid-width and the grid-margin as variables ... and use these mixins within the different media-queries. this allows me to have a 16col 25px/25px grid for large screens, a 16col 20px/2px grid for smaller screens, a 12col 20px/20px grid for tablets and fluid-columns for smartphones. this approach is somehow strange of course – since default.scss and large.scss is pretty much the same (I just need to re-calculate the width). tried to use framelessgrid, but (to be honest) I didn´t quite understand it.