zoukankan      html  css  js  c++  java
  • compass模块----Utilities

    引入Utilities:

    @import "compass/utilities";

    分别引入:

    @import "compass/utilities/color";

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

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

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

    General:通用的一般类的集合(比如:跨浏览器的float,清除浮动等等)

    clearfix:清除浮动

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

    @import "compass/utilities/print";

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

    @include print-utilities(screen);

    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>

    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 }

     

  • 相关阅读:
    14. D3D光照
    17. 增加对硬件光照的支持
    ECommerce Starter Kit 数据库表和存储过程一览
    使用 DataAdapter 执行批量更新
    学习Professional ASP.NET 2.0(四)
    c#泛型学习(二)
    学习Professional ASP.NET 2.0(一)
    学习Professional ASP.NET 2.0(二)
    下载:微软网页设计工具CTP测试版(支持asp.net2.0)
    学习ECommerce Starter Kit (1)
  • 原文地址:https://www.cnblogs.com/alice-shan/p/5012267.html
Copyright © 2011-2022 走看看