sass & compass 学习笔记
1. sass和compass的安装过程
2.第一个compass创建的myproject
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的一些语法之前有介绍过,可以回顾一下。