1

我在我的项目中使用了 SASS 的 ZEN Grid 系统。我想要一个简单的 12 列 960 网格。

我使用这段代码：

$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;
@import "zen";

$zen-column-count: 12;
$zen-gutter-width: 20px;


.row {
    @include zen-grid-container;
}

.col-6 {
    @include zen-clear();
    @include zen-grid-item(4, 1);
}

但现在问题来了。现在.col-6得到很多 CSS。ZEN Grids 给.col-6类这个 CSS：

clear: left;
float: left;
width: 33.33333%;
margin-left: 0%;
margin-right: -33.33333%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;

如何删除清除、边距、框大小和所有 CSS。我只想要网格的简单 CSS 属性。

4

2 回答 2

3

来自混合： httpsclear : //github.com/JohnAlbin/compass-zen-grids/blob/master/stylesheets/zen/_grids.scss#L170zen-clear()

如果您查看源代码，则zen-grid-itemmixin 有其他参数（https://github.com/JohnAlbin/compass-zen-grids/blob/master/stylesheets/zen/_grids.scss#L71），这将允许您关闭box-sizing：

@include zen-grid-item(4, 1, $box-sizing: content-box);

其他属性更难删除。如果一切都失败了，你可以用你自己的一个来覆盖 Zen 的 mixin。

于 2012-12-18T15:32:50.023 回答
0

Zen Grid 正在使用 Compass，它正在为您创建所有这些浏览器前缀，以便所有浏览器看起来都相似。但你是对的，这会使 CSS 变得混乱。值得庆幸的是，它们具有默认的布尔变量，您可以覆盖它们，以便您将其关闭。

添加并将这些中的任何一个或全部设置为 false 以删除额外的前缀：

$experimental-support-for-mozilla : true !default;
$experimental-support-for-webkit : true !default;
$support-for-original-webkit-gradients : true !default;
$experimental-support-for-opera : true !default;
$experimental-support-for-microsoft : true !default;
$experimental-support-for-khtml : true !default;

参考从 compass-style.org的 Compass 样式表中删除供应商前缀

于 2012-12-18T15:08:35.800 回答