compass学习记1

sass & compass 学习笔记
1.sass和compass的安装过程
2.第一个compass创建的myproject

  打开cmd，进入你准备存放myproject的目录

  命令： compass create myproject

myproject创建成功

• config.rb这是个配置文件，主要指定sass源文件地址，以及编译后生成的css文件地址
  
• sass存放sass源文件
  
• stylesheets存放编译后生成的css

这里目录一目了然不多做介绍，打开screen.scss

@import "compass/reset"; /* 在css中生成重置样式 */

打开screen.css,这里面的代码就是@import "compass/reset";编译后得到的重置样式，不需要再手动去写

已有工程的初始化
对于已经创建好的工程，要想支持compass编译，只需要初始化一下就可以(切换到指定目录下)：

 compass init

编译
完成sass的开发后，只需要运行下编译命令：

compass compile

compile支持多种模式的编译，详细信息可通过compass compile -h查看。
每次编写sass完成后，都需要手动运行下编译命令，能不能自动编译呢？那当然是可以的，只需要对当前工程添加watch监视，如下：

compass watch

组件模块
前面我们提到compass提供了便捷的组件模块，看看有哪些常用的组件：

• reset 浏览器样式重置模块，减少不同浏览器间的差异性
• css3 css3命令模块
• layout 布局模块
• typography 版式模块
• utilities 工具类

reset使用：在css中生成重置样式

@import "compass/reset";

css3使用：

@import "compass/css3";

由于浏览器对css3支持的差异性，很多时候需要写一堆针对不同浏览器前缀样式，很烦人，css3命令模块解决了这个问题，只需include相应样式定义即可，compass会自动生成针对不同浏览器的样式定义：

　@import "compass/css3";　　.circle {　　　　@include border-radius(5px);　　}

编译后：

　　.circle {　　　　-moz-border-radius: 5px;　　　　-webkit-border-radius: 5px;　　　　-o-border-radius: 5px;　　　　-ms-border-radius: 5px;　　　　-khtml-border-radius: 5px;　　　　border-radius: 5px;　　}

sass的一些语法之前有介绍过，可以回顾一下。