compass模块Utilities_html/css_WEB-ITnose
@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
水果品类 | 5橘子 | 6苹果 | 7鸭梨 | 8香蕉 | 9打包 | 10
---|---|---|---|---|---|
单价 | 151 | 162 | 173 | 184 | 1910 | 20
十个 | 2310 | 2420 | 2530 | 2640 | 27100 | 28
总额 | 3311 | 3422 | 3533 | 3644 | 37110 | 38
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 }
上一篇: 一个接口,能得到返回的xml文件,如何提取有用的内容?
下一篇: 网页开发与socket
推荐阅读
-
强悍的CSS工具组合:Blueprint, Sass, Compass_html/css_WEB-ITnose
-
Drupal 7 模块开发 建立模块 第一个页面(hook_menu)_html/css_WEB-ITnose
-
Axure做注册模块的一些小操作_html/css_WEB-ITnose
-
jfinal cms 2.6.0 发布 添加栏目相关模块_html/css_WEB-ITnose
-
jfinal cms 2.6.0 发布 添加栏目相关模块_html/css_WEB-ITnose
-
静态网站公用的部分模块的引用(设置)方法_html/css_WEB-ITnose
-
PHPStrom使用SASS,SCSS和Compass_html/css_WEB-ITnose
-
CSS 布局模块_html/css_WEB-ITnose
-
静态网站公用的部分模块的引用(设置)方法_html/css_WEB-ITnose
-
compass自动生成雪碧图_html/css_WEB-ITnose