Question

我已经与Susy配置了我的第一个指南针项目。

在我的 screen.scss 中，我有以下代码：

// 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.
}

输出 screen.css 会产生：

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;
}

问题1：在文章栏中忽略 screen.scss 中的omega属性时，我没有“ #margin-left: -1em; ”。这是什么意思？

问题2：所有元素都使用width属性设置。这是允许的，因为所有块都显示为内联？

Answer 1

当您跨越网格的整个宽度（5/5）时，您根本不需要使用任何mixins - 因为这是默认情况下所有阻止html元素（nav，article等）的功能。因此，在您的情况下，您可以完全删除导航/文章代码（尽管您可能需要导航的clearfix）。

您的其他问题与Internet Explorer遗留支持黑客有关，您可以使用指南针设置$legacy-support-for-ie6和$legacy-support-for-ie7打开和关闭。

灵活的布局迫使浏览器偶尔进行子像素舍入。 IE6和7在进行舍入时遇到问题，有时它们会破坏布局，因此我们为具有隐藏负边距的浏览器留出了额外的空间：#margin-left: -1em;。 #是一个只有IE6和IE7才能看透的黑客。
display: inline;对浮动元素没有影响，这就是我们仍然可以应用宽度和其他块样式的原因。但是在IE6中，将浮点数设置为inline可以修复双边距错误。

输出screen.css

1 个答案: