0

Recently we created a new project using Sass and Compass. I tried to use the basic setup:

$total-columns  : 12;
$header-columns : 36;
$column-width   : 5em;
$gutter-width   : 1em;  

$susy: (
 /*the basics*/
 flow: ltr,
 math: fluid,
 output: float,
 gutter-position: after,
 container: auto,
 container-position: center,    
 columns: $total-columns,
 gutters: $gutter-width / $column-width,
 column-width: $column-width,
 last-flow: to,
 debug: (
    image: show,
    color: blue,
    output: overlay,
    toggle: top right,
 ),
 use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
 )
);

We import Susy on every page but we are not able to see the gutters. 

div.block{
  @include span(4 of 12);  

  position: relative;
  box-sizing: border-box;
  background-color: rgba(255,255,255,0.9);
  border: 6px double rgba(0,0,0,0.3);
  min-height: 18em;
  text-align: center;
  margin-bottom: 1em;
  padding:0;
  border-radius: 10px;
  overflow: hidden;
}

We expected the margin would be auto calculated, but if we look in the output Margin-right and Margin-left are not created.

Output:

  width: 33.33333%;
  float: left;
  position: relative;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.9);
  border: 6px double rgba(0, 0, 0, 0.3);
  min-height: 18em;
  text-align: center;
  margin-bottom: 1em;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;

What are we missing here?

Ronald Zwiers
  • 780
  • 2
  • 10
  • 25
  • I can't recreate this output. I get `margin-right: 1.40845%;` every time. There must be something else in your code that is removing that? – Miriam Suzanne Jun 29 '15 at 23:15
  • The problem had something to do with importing scss inside an object. E.g: section{ (at)import "partial"; } While doing this Compass first compiles the partial and after that the parent scss file. And that does not create the margins somehow.. So we moved the (at)import at the top of the scss file and added the parent object to the div.block: section{ div.block{ .... } } Now it is compiling correct but VERY slow... – Ronald Zwiers Jun 30 '15 at 10:30
  • Also be aware that the order of imports is very important. We run to the same problem again, then we changed the order of the imports at the top of the page and the margins were back again. – Ronald Zwiers Jun 30 '15 at 12:28
  • The order and location of imports is relevant in Sass, but I'm not sure why it would affect Susy margins specifically. The speed issues are a known problem with Ruby Sass. I think they are taking steps to address the problem, but you can also try moving to Libsass (though Compass wont work). – Miriam Suzanne Jun 30 '15 at 15:58

0 Answers0