• 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 }

     

  • 相关阅读:
    oracle安装界面中文乱码解决
    Vmware esxi开启snmp服务
    sybase ase 重启
    zabbix通过snmp监控vmware vpshere5.5
    Linux下安装Sybase ASE 16
    DATAGUARD在做SWITCHOVER切换时遇到问题总结
    UVA 1564
    Drupal 7 模块开发 建立模块帮助信息(hook_help)
    HTML5实现图片文件异步上传
    RGCDQ(线段树+数论)
  • 原文地址:https://www.cnblogs.com/alice-shan/p/5012267.html
Copyright © 2020-2023  润新知