1

プロジェクトでは、SASSにZENグリッドシステムを使用しました。単純な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グリッドは.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

これclearはミックスインからのものzen-clear()です： https ：//github.com/JohnAlbin/compass-zen-grids/blob/master/stylesheets/zen/_grids.scss#L170

ソースを見ると、ミックスインに追加のパラメーターがありますzen-grid-item（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のミックスインを独自のミックスインで上書きできます。

于 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 に答える