Sass与Compass——回顾

compass 是sass的一个工具库
　　compass在sass 的基础上封装了一系列有用的模块，用来补充和丰富sass的工能，

　　安装：
　　　　compass是用 ruby语言开发的，所以安装它之前必须安装ruby。
　　命令：

　　　　gem install compass
　　项目初始化：
　　　　要创建一个你的Compass 项目，如果项目的名字叫 myproject
　　　　　　compass create myproject
　　　　会在当前的目录下生成这个目录，里面有config.rb文件，还有两个子目录sass 和 stylesheets 前者存放sass 源文件，后者放编译后的
css文件。

　　编译：
　　　　我在开发的时候写出来的是文件后缀名为scss的文件。只有编译成css文件，才能用到网站上。
　　　　　　compass 的编译命令为
　　　　　　　　compass compile
　　　　该命令在项目根目录下运行，将会sass 子目录中的scss 文件编译成css文件，保存在stylesheets子目录中。
　　　　　　默认编译出来的css 文件带有大量的注释，生产环境需要压缩后的css文件
　　　　　　　　compass compile --output-style compressed
　　　　如果重新编译未修改过的文件
　　　　　　　　compass compile --force
　　　　除了使用命令参数，还可以在配置文件config.rb 中指定编译模式。

　　　　　　output_style = :expanded
　　　　　　　　:expanded 表示编译后保留原格式， 其他值还包括: nested,
　　　　　　　　:compact和compressed 进入生产阶段后，就要改为:compressed模式。
　　　　　　　　　　output_style = :compressed
　　　　也可以通过指定environment的值（:production或者:development），智能判断编译模式。

　　　　　　environment = :development
　　　　　　　　output_style = (environment == :production) ? :compressed : :expanded

　　　　在命令行模式下，除了一次性编译命令，compass还有自动编译命令

　　　　　　compass watch
　　　　　　　　只要scss文件发生变化，就会被自动编译成css文件。

compass 的模块

　　　　compass采用模块结构，不同模块提供不同的功能，内置5个模块。
　　　　reset css3 layout typography unilities

　　reset模块

　　　　在编写自己的样式之前，有必要重置浏览器的默认样式。
　　　　　　写法是：
　　　　　　　　@import "compass/reset"
　　　　上面的@import命令，用来指定加载模块，这里就是加载reset模块。编译后，会生成相应的css reset代码。

　　CSS3模块
　　　　该模块提供24 中css3命令。如：
　　　　　　圆角(border-radius) 的写法,
　　　　　　　　@import "compass/css3";
　　　　　　　　　　　　.rounded {
　　　　　　　　　　　　　　　　@include border-radius(5px);
　　　　　　　　　　　　}
　　　　上面的@include命令，表示调用某个mixin（类似于C语言的宏），5px是参数，这里用来指定圆角的半径。

　　　　编译后的代码为:
　　　　　　.rounded {
　　　　　　　　-moz-border-radius: 5px;
　　　　　　　　-webkit-border-radius: 5px;
　　　　　　　　-o-border-radius: 5px;
　　　　　　　　-ms-border-radius: 5px;
　　　　　　　　-khtml-border-radius: 5px;
　　　　　　　　border-radius: 5px;
　　　　　　}

　　　　如果只需要左上角为圆角，写法为
　　　　@include border-corner-radius(top, left, 5px);

　　layout模块
　　　　该模块提供布局功能，
　　　　比如，指定页面的footer部分出现在浏览器的最低端。
　　　　　　@import "compass/layout";
　　　　　　　　#footer {
　　　　　　　　　　@include sticky-footer(54px);
　　　　　　　　}
　　　　指定子元素占满父元素的空间：

　　　　　　@import "compass/layout";
　　　　　　　　#stretch-full {
　　　　　　　　　　@include stretch;
　　　　　　　　}
　　typography模块
　　　　该模块提供板式功能
　　　　　　比如，指定链接颜色的mixin为：
　　　　　　　　link-colors($normal, $hover, $active, $visited, $focus);
　　　　　　使用时写成：
　　　　　　　　@import "compass/typography";
　　　　　　　　　　a {
　　　　　　　　　　　　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
　　　　　　　　}

　　utilities模块

　　　　该模块提供某些不属于其他模块的功能。
　　　　比如，清除浮动：

　　　　　　import "compass/utilities/";
　　　　　　　　.clearfix {
　　　　　　　　　　@include clearfix;
　　　　　　　}
　　　　比如表格：
　　　　　　@import "compass/utilities";
　　　　　　　　table {
　　　　　　　　　　@include table-scaffolding;
　　　　　　　　}

　　　　编译后
　　　　　　　table th {
　　　　　　　　text-align: center;
　　　　　　　　font-weight: bold;
　　　　　　　　}
　　　　　　table td,
　　　　　　table th {
　　　　　　　　padding: 2px;
　　　　　　}
　　　　　　table td.numeric,
　　　　　　table th.numeric {
　　　　　　　　text-align: right;
　　　　　　}

　　　　Helper函数
　　　　　　除了模块外，compass还提供了一系列函数。
　　　　　　有一些有用的函数，image-width() 和image-height() 返回图片的宽和高
　　　　　　再比如，inline-image()可以将图片转为data协议的数据。

　　　　　　　　@import "compass";
　　　　　　　　.icon { background-image: inline-image("icon.png");}

　　　　　　　　编译后得到
　　　　　　　　　　.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}
　　　　　　　　　　　　函数与mixin的主要区别是，不需要使用@include命令，可以直接调用。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有