Search code examples
csssasssusy-compass

Output screen.css

I have configured my first compass project with Susy.

In my screen.scss, I have the following code:

// container([$<media-layout>]*)
.page { @include container; 
        @include susy-grid-background; //use it for background-image to see width all columns 
}

// span-columns(<$columns> [<omega> , <$context>, <$padding>, <$from>])
nav { @include span-columns(5,5); //span 5 from 5 columns
    li{float:left;padding:0 1em 0 0;}
}
article { @include span-columns(5 omega,5); //span 5 from 5 columns , <omega>: Optional flag to signal the last element in a row.
}

The output screen.css results in:

nav {
  width: 100%;
  float: left;
  margin-right: 4.16667%;
  display: inline;
}
/* line 24, ../sass/screen.scss */
nav li {
  float: left;
  padding: 0 1em 0 0;
}

/* line 26, ../sass/screen.scss */
article {
  width: 100%;
  float: right;
  margin-right: 0;
  #margin-left: -1em;
  display: inline;
}

Question 1: when leaving out the omega attribute in the screen.scss in the article block, I don't have this '#margin-left: -1em;'. What does this mean?

Question 2: all the elements are set with a width property. Is this allowed here since all blocks have display inline?

Solution

  • When you are spanning the full width of your grid (5/5), you don't need to use any mixins at all - because that's what all block html elements (nav, article, etc) do by default. So in your case, you can remove the nav/article code entirely (though you may want a clearfix for the nav).

    Your other questions are related to Internet Explorer legacy-support hacks, which you can turn on and off using the Compass settings $legacy-support-for-ie6 and $legacy-support-for-ie7.

    1. Flexible layouts force the browser to do occasional sub-pixel rounding. IE6 and 7 have trouble with that rounding, and sometimes they break the layout, so we make extra space for those browsers with a hidden negative-margin: #margin-left: -1em;. The # is a hack that only IE6 and IE7 are able to see through.

    2. display: inline; has no affect on floated elements, which is why we can still apply width and other block styles. But in IE6, setting a float to inline fixes the double-margin bug.