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.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部分的颜色值,不设置默认为白色
例子:

 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 }
时间: 2024-10-06 01:09:37

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

compass模块

Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/layout" 只有这两个模块是需要明确 指定引入的@import "compass"默认包含了其他五大模块却不包含resrt,layout 其他四个功能模块和Browser support模块CSS3:跨浏览器的CSS3能力Helpers:内含一系列的函数,跟SASS的函数列表

compass模块----Helpers

Color Stops:在使用CSS3渐变属性生成图片的时候,有时候为了打造更丰富的渐变效果除了声明渐变线上的起始点和终止点的色值,还有声明一些中间点的色值,这些点我们就称之为Color Stops.一个色值加上当前点的位置.当我们省略点位置表示的时候Color Stops helper function 会自动帮我们计算输出这个点的位置.Colors:用来亮化调整一个色值(用到的极少极少)Constants:Cross Browser:如果我们要为compass贡献跨浏览器的CSS新特性插件D

sass与compass实战(读书笔记)

// compass create myproject // compass compile // compass compile --force 重新编译未改动的 // compass compile --output-style compressed // compass compile --output-style compressed --force // compass watch // compass模块:reset css3 layout typography utilities

(二)在实战中使用Sass和Compass

第三章 无需计算玩转CSS网格布局 3.1 网格布局介绍 3.2 使用网格布局 3.2.1 术语 1 术语名 定义 是否涉及HTML标签 2 列 内容度量的垂直单位 否 3 容器 构成一个网格布局的HTML元素 是 4 槽 网格布局中列与列之间的统一留白 否 3.2.3 固定的网格布局还是流动的网格布局 1 // 由于网络用户的屏幕尺寸不一,设计人员有两种选择: 2 // 1.要么选择一种对于大多数用户合理的固定布局大小(并且限制这种布局内的内容不溢出); 3 // 2.要么实现一种灵活的流动布

compass 基础

/*! Welcome to Compass. * In this file you should write your main styles. (or centralize your imports) * Import this file using the following HTML or equivalent: * <link href="/stylesheets/screen.css" media="screen, projection" rel=

Sass与Compress实战:第一章

1.消除冗余代码的方式: ?通过变量来复用属性值 例如,一段冗余的CSS代码: h1#brand { color : #1875e7 } #sidebar { background-color : #1875e7 } 使用Sass,把属性值赋给变量,然后在一个地方管理散落在各处的属性值.几乎任意属性值都可以赋给变量: $company-blue : #1875e7; h1#brand{ color : $company-blue; } #sidebar{ background-color : $

WEB+DB PRESS 中文版 02

这篇是计算机类的优质预售推荐<WEB+DB PRESS 中文版 02>. 智能手机测试+Amazon Web Services+SassCompass实战,腾讯.百度.淘宝.美团.豆瓣前后端工程师鼎力推荐. 编辑推荐 腾讯.百度.淘宝.美团.豆瓣前后端工程师鼎力推荐 旨在帮助程序员更实时.深入地了解前沿技术,扩大视野,提升技能 内容侧重Web开发相关领域的研究与技术分享,并结合未来趋势对当前的技术作新解读 智能手机测试最前沿 应用.浏览器.服务器端完全自动化 Amazon Web Servic

第十二篇:SOUI的utilities模块为什么要用DLL编译?

SOUI相对于DuiEngine一个重要的变化就是很多模块变成了一个单独的DLL. 然后很多情况下用户可能希望整个产品就是一个EXE,原来DuiEngine提供了LIB编译模式,此时链接LIB模式的DuiEngine就行了. 但是SOUI默认至少Utilities那个模块是不提供LIB编译模式的. utilities之所以默认只提供DLL编译是因为SString类是由utilities实现的. 字符串是编译中碰到的最最见的基本对象之一.在运行库(CRT)动态编译(MD,MDd)时这不是问题,因为

使用 Compass 生成雪碧图

使用 Compass 创建一个项目 要在一个新项目中使用 Compass,可以打开命令行工具并输入如下指令 compass create my-project 如果 my-project 目录不存在,上述命令会创建一个叫做 my-project 的目录,并在其中添加以下文件: 如果你没有为compass create命令传递一个目录参数,它将使用你当前所在的目录. 在config.rb文件中,你可以对Compass的一些配置进行修改,例如资源位置和压缩程度.sass目录包含了一些初始的样式表,你