コンパス模块Utilities_html/css_WEB-ITnose

導入されたユーティリティ:

@import "compass/utilities";

それぞれ導入された:

@import "compass/utilities/color";

カラー: カラー関連ツールのコレクション
1、色の明るさは明るさを計算するために使用されます

値

1 @debug brightness(#000);2 @debug brightness(#ccc);3 @debug brightness(#fff);

色の明るさがコマンドラインに出力されます。
2. カラーコントラスト
コントラストミックスインは、渡した背景色のカラー値に基づいて背景色属性を自動的に生成します。同時に、プリセットのデフォルトの暗い値と明るい値のいずれかを選択します。現在の背景に対してテキストをより目立たせるために、背景色とは対照的に color 属性に設定されます

General: 共通の一般クラスのコレクション (例: クロスブラウザーフロート、クリアフロートなど) .)

clearfix: float をクリアします

Print: 印刷制御ツールのコレクション
印刷モジュールを紹介します :

@import "compass/utilities/print";

2 つのファイル print.scss で共同で使用する必要があり、print.scss も必要ですプリントモジュールを導入します。 print.scss 内の print-utilities mixin を呼び出します。
screen.scss の print-utilities mixin も呼び出します (呼び出し時にメディア パラメーターを渡す必要があり、それを screen として指定します。渡されない場合、デフォルトは print です):

@include print-utilities(screen);

Sprites : スプライト画像の組み合わせ グラフ関連のツールのコレクション (コンパスを使用する際に最も重要なこと)

Tables: テーブルのスタイル関連のツールのコレクション
テーブルの境界線: テーブルに境界線を追加するために使用されます。 。 2 つのミックスイン、1 つは外側の境界線を変更し、もう 1 つはセル間の境界を変更します
2. テーブル スキャフォールディング: セルのテキストを整列させ、パディングを初期化します
3. テーブル ストライピング: 奇数行と偶数行に異なる色を適用します。代替列
alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color, $footer-color)：
最初のパラメータ: color偶数行の色
2 番目のパラメータ: 奇数行の色
3 番目のパラメータ: 間隔列の色の違い (隣接する 2 つの列、隣接する 2 つの列、1 つおきの列の間の違いを強調するために、元の色との色の差)
4番目のパラメータ:ヘッダー部分(thタグを参照)の色の値は設定されておらず、デフォルトは白です
5番目のパラメータ:フッター部分の色の値(設定されていない場合はデフォルトを設定)白に
例:

 1 <table class="goods-price" cellspacing="0"> 2     <thead> 3         <tr class="odd"> 4             <th>水果品类</th> 5             <th>橘子</th> 6             <th>苹果</th> 7             <th>鸭梨</th> 8             <th>香蕉</th> 9             <th>打包</th>10         </tr>11     </thead>12     <tbody>13         <tr class="even">14             <th>单价</th>15             <td class="numeric">1</td>16             <td class="numeric">2</td>17             <td class="numeric">3</td>18             <td class="numeric">4</td>19             <td class="numeric">10</td>20         </tr>21         <tr class="odd">22             <th>十个</th>23             <td class="numeric">10</td>24             <td class="numeric">20</td>25             <td class="numeric">30</td>26             <td class="numeric">40</td>27             <td class="numeric">100</td>28         </tr>29     </tbody>30     <tfoot>31         <tr class="even">32             <th>总额</th>33             <td class="numeric">11</td>34             <td class="numeric">22</td>35             <td class="numeric">33</td>36             <td class="numeric">44</td>37             <td class="numeric">110</td>38         </tr> 39     </tfoot>40 </table>

SASS:

1 .goods-price{2  $table-color: #7a98c6;3  @include outer-table-borders();4  @include inner-table-borders(1px, darken($table-color, 40%));5  @include table-scaffolding();6  @include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222222);7 }