compass 初学笔记一

来源：互联网发布：淘宝淘宝全屏导航条编辑：程序博客网时间：2024/05/16 15:35

compass 是 sass的工具库，一个框架库，sass本身就是一个编译器，compass在它的基础上封装了一系列css有用的模块与模版。用上了compass，就知道他的高大上了，使我们写css的效率更上一层楼。安装compass同理需要在ruby环境下运行。

compass安装:
先查看自己电脑是否安装了ruby,看支不支持gem命令就行啦。比如查看已经安装的所有模块:
```
gem list
```
显示如下:

有ruby环境了，我们就可以接着安装compass，命令如下:
```
gem install compass
```
安装信息如下:

在安装过程中遇到了一些问题，搞了好久才安装成功，我把经验一并写出来：
安装的时候直接报错，查了资料是说，国内墙得厉害，于是我用VPN上，可还是报错，于是想到了用taobao镜像。去掉默认的连接，换成淘宝的。命令如下：
```
gem sources -remove https://rubygems.org/
```
```
gem sources -a https://ruby.taobao.org/
```
还是报SSL的错误:

网上查了N多资料，都是是OPENSSL证书过期什么的，试了好多方法还是不行。于是就一步一步查，慢慢查，慢慢试。结果真可以了：把连接还是换成之前的，只是改成http，不要https，竟然发现可以正常运行。太奇怪了，至今都不知道是什么原因。
compass安装好了，就可以建立我们的compass项目了。
新建一文件夹，在文件夹里，创建compass项目
```
mkdir compass_demo
```
创建compass项目:
```
compass create demo
```
创建完成后，你会发现多了几个文件：
设置浏览器支持情况。这个根据项目要求来定。编辑screen.scss文件.刚开始要引入相对应的文件：可以参考官方文档说明，连接直达。
```
@import "compass/support"
```
浏览器支持下面有非常多的用法，大家可以自己看。在这里只举部分示例：先以debug 浏览器支持情况来测试，开启ture ：
```
$debug-browser-support:ture;
```
写css3的圆角
```
.rounded { @include border-radius(6px);}
```
开启compass的watch监视功能：
```
compass watch
```
就可以看到编译后的css文件了,针对css3浏览器情况有详细的注释说明，如下：

再比如设置浏览器的最小支持情况，以项目要求而定：
```
$browser-minimum-versions:('ie':'8');
```
打印浏览器支持情况:
```
@debug browsers();
```
后面还有好多，自己有时间可以一一去尝试

0 0