引入Utilities:

@import "compass/utilities";

分别引入:

@import "compass/utilities/color";

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

 @debug brightness(#000);
@debug brightness(#ccc);
@debug brightness(#fff);

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

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

clearfix:清除浮动

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

@import "compass/utilities/print";

我们必须在两个文件中协同使用,print.scss,print.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部分的颜色值,不设置默认为白色
例子:

 <table class="goods-price" cellspacing="0">
<thead>
<tr class="odd">
<th>水果品类</th>
<th>橘子</th>
<th>苹果</th>
<th>鸭梨</th>
<th>香蕉</th>
<th>打包</th>
</tr>
</thead>
<tbody>
<tr class="even">
<th>单价</th>
<td class="numeric">1</td>
<td class="numeric">2</td>
<td class="numeric">3</td>
<td class="numeric">4</td>
<td class="numeric">10</td>
</tr>
<tr class="odd">
<th>十个</th>
<td class="numeric">10</td>
<td class="numeric">20</td>
<td class="numeric">30</td>
<td class="numeric">40</td>
<td class="numeric">100</td>
</tr>
</tbody>
<tfoot>
<tr class="even">
<th>总额</th>
<td class="numeric">11</td>
<td class="numeric">22</td>
<td class="numeric">33</td>
<td class="numeric">44</td>
<td class="numeric">110</td>
</tr>
</tfoot>
</table>

SASS:

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

compass模块----Utilities的更多相关文章

  1. compass模块

    Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...

  2. compass模块----Utilities----Sprites精灵图合图

    css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是 ...

  3. compass模块----Helpers

    Color Stops:在使用CSS3渐变属性生成图片的时候,有时候为了打造更丰富的渐变效果除了声明渐变线上的起始点和终止点的色值,还有声明一些中间点的色值,这些点我们就称之为Color Stops. ...

  4. Compass的误解与新发现

    最后个人感觉 Compass是 css世界的.NET 很久以前看到 Compass 误以为是css编译器,因为总是在看到如何安装Scss的文章里面看到的 知道最近不小心进入 Compass官网溜达,才 ...

  5. 前端利器:SASS基础与Compass入门

    SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...

  6. 初始化rails上的compass项目

    compass以外还有一个很实用的scss模块, _media-queries.scss 通过终端下载 curl -O https://raw.github.com/paranoida/sass-me ...

  7. [转]前端利器:SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

  8. Sass之Compass学习笔记

    compass Compass是Sass的工具库,就好像jQuery是js的库一样. sass有了compass的配合,就会更加事半功倍. Sass本身只是一个编译器,Compass在它的基础上,封装 ...

  9. 在实战中使用Sass和Compass

    第三章 无需计算玩转CSS网格布局 3.1 网格布局介绍 3.2 使用网格布局 3.2.1 术语 1 术语名 定义 是否涉及HTML标签 2 列 内容度量的垂直单位 否 3 容器 构成一个网格布局的H ...

随机推荐

  1. python 下的数据结构与算法---2:大O符号与常用算法和数据结构的复杂度速查表

    目录: 一:大O记法 二:各函数高阶比较 三:常用算法和数据结构的复杂度速查表 四:常见的logn是怎么来的 一:大O记法 算法复杂度记法有很多种,其中最常用的就是Big O notation(大O记 ...

  2. 发布到IIS后 程序乱码

    网站-功能视图-.net全球化 编码设置 请求:utf-8 文件:gb2312 响应:utf-8 响应头:utf-8 可以根据需要自己定义

  3. SQL从入门到基础 - 05 数据分组、Having语句

    一.数据分组 1. 按照年龄进行分组统计各个年龄段的人数: Select FAge,count(*) from T_Employee group by FAge; 2. Group by子句必须放到w ...

  4. 如何快速恢复MyEclipse的默认主题

    这里天在研究主题,到网上找了一些主题导入,可是有一部分主题导入后不能通过preference选项进行恢复默认主题!那怎么办?有没有别的办法! 在网上找了一些答案,有更改工作空间的办法,也有替换.set ...

  5. scala学习笔记-集合

    变长数组:数组缓冲 Scala中对于那种长度会变的数组的数据结构为ArrayBuffer. import scala.collection.mutable.ArrayBuffer; // 一个空的数组 ...

  6. CF 277E Binary Tree on Plane (拆点 + 费用流) (KM也可做)

    题目大意: 平面上有n个点,两两不同.现在给出二叉树的定义,要求树边一定是从上指向下,即从y坐标大的点指向小的点,并且每个结点至多有两个儿子.现在让你求给出的这些点是否能构成一棵二叉树,如果能,使二叉 ...

  7. js判断是否微信浏览器打开

    function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)==&qu ...

  8. Css3小技术

    圆角border-radius border-radius:length *注: 这是一个缩写,相当于四个角设置同样的值,用px或者百分比都可以,想要成为圆形,就用50%,你也可以单独设置每个角,语法 ...

  9. Membership添加验证码登录

    1.在公共类ImageHelper中编写公共方法,产生随机验证码 /// <summary> /// 产生随机验证码 /// </summary> /// <return ...

  10. (摘)ORACLE DBA的职责

    ORACLE数据库管理员应按如下方式对ORACLE数据库系统做定期监控: (1). 每天对ORACLE数据库的运行状态,日志文件,备份情况,数据 库的空间使用情况,系统资源的使用情况进行检查,发现并解 ...