今天带来compass的使用方式

Posted 2021-03-08 dy105525

一、为什么我们要使用compass呢

1. Experience cleaner markup without presentational classes.
2. It’s chock full of the web’s best reusable patterns.
3. It makes creating sprites a breeze.
4. Compass mixins make CSS3 easy.
5. Create beautiful typographic rhythms.
6. Download and create extensions with ease

上面为我们官网的解释，当然我英语不太好，但我知道最关键的一点是第四点，它的意思是操作起来用css3使用更加的轻松。

当然按照我的理解，它还有加上前缀，颜色助手，函数计算，变量使用等等的功能，它可以这么来理解，jQuery是javascript的库，那么compass就是sass的库。

二、compass的安装

　　compass它是基于ruby来进行编写的，那么我们进入compass的官网一路过来，就会提示需要安装 RubyInstaller.

 

 

 这个安装好之后，就可以使用cmd来进行安装compass了，输入下面指令即可安装成功

$ gem install compass

这里如果要来进行检验我们怎么操作呢？

　　直接输入 compass -v即可

　　当然也可以使用  compass version

当然我还是听说网上的伙伴们需要换成国内的源才可以安装成功，但是我是没有换源的，也是安装成功了，如果确实需要下面是换源方式

1、移除： gem sources --remove https://rubygems.org/
2、添加： gem sources --add http://sh0.gems.ruby-china.org/（国内的源）

安装成功后，我们要用到几个操作

　　1>创建compass的项目

　　　　指令为 ： compass create（路径为空文件夹吧）       解释下为什么我们不安装sass，因为这个完全不需要了，compass就已经有这个了，就像我们使用jQuery一样的

　　2>将scss转化成css

　　　　指令为 ： compass compile 

　　　　上面是单个进行改变，才将对应的转化成css，如果想全部的话，在后面加一个  --force

　　3>编写scss时进行转化监听

　　　　指令为 ： compass watch   scss改变后css内容也跟着改变

　　4>输出格式，一个是我们的编译环境模式，另一个是生产模式，那么我们怎么来书写呢

　　　　在config.rb里面来进行配置编译代码如下（注意ruby里面的注释为#）

　　　　

　　　　environment= :development（这个是环境模式，这里我们是可以改成生产模式的，也就是:production）

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

 

以上就是我们compass的安装过程需要使用的

三、compass的认识

　　　只是个人的认为css的内容是非常的复杂的，找一个类似于语言的的来写css的话是很好的，因此我最好选择还是sass，或者compass来，less和另外一个sty什么的，它们三者是非常类似的，大同小异，只需要学好一个就可以了。