compass模块Utilities_html/css_WEB-ITnose-HTML Tutorial-php.cn

compass模块Utilities_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:32:33

Original

1401 people have browsed it

引入Utilities：

@import "compass/utilities";

Copy after login

分别引入：

@import "compass/utilities/color";

Copy after login

Color：颜色相关的工具集合
1、Color Brightness用来计算一个值的亮度

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

Copy after login

在命令行会输出颜色的亮度。
2、Color Contrast
contrasted mixin根据我们传入的背景色的色值自动帮我们生成background-color属性，同时在预设的默认深色值和浅色值中选一个跟我们背景色对度大的设为我们的color属性，为的是让文字在当前背景下更好的突现出来

General：通用的一般类的集合（比如：跨浏览器的float，清除浮动等等）

clearfix：清除浮动

Print：打印控制工具的集合
引入打印模块：

@import "compass/utilities/print";

Copy after login

我们必须在两个文件中协同使用，print.scss，print.scss也需要引入print模块。在print.scss中调用print-utilities mixin 。
还要在screen.scss中调用print-utilities mixin（调用的时候需要传一个media参数，指定为screen，不传默认为print）：

@include print-utilities(screen);

Copy after login

Sprites：精灵图合图相关的工具集合（使用compass的重中之重）

Tables：table样式相关的工具集合
1、Table Borders：用来给table添加border。两个mixin，一个修饰外侧的边框，一个修饰单元格之间的边框
2、Table Scaffolding：table脚手架，进行单元格文本的对齐以及padding的初始化
3、Table Striping：对奇偶行进行不同的颜色修饰，对相隔列进行颜色修饰
alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color, $footer-color)：
第一参数：偶数行的颜色
第二个参数：奇数行的颜色
第三个参数：间隔纵列的颜色差值（为了突出相邻两列的差异，相邻的两列，每隔一列我们会在其原来颜色的基础上去减掉一个颜色差值）
第四个参数：header部分的颜色值（指th标签）不设置默认为白色
第五个参数：footer部分的颜色值，不设置默认为白色
例子：

 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>

Copy after login

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 }

Copy after login