一、为什么我们要使用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什么的,它们三者是非常类似的,大同小异,只需要学好一个就可以了。

今天带来compass的使用方式的更多相关文章

  1. SASS+COMPASS 自适应 学习笔记

    来源 http://snugug.github.io/RWD-with-Sass-Compass/#/ 1 安装 COMPASS 扩展 安装 方式 gem 'extension', '~>X.Y ...

  2. Cilium 1.11 发布,带来内核级服务网格、拓扑感知路由....

    原文链接:https://isovalent.com/blog/post/2021-12-release-111 作者:Cilium 母公司 Isovalent 团队 译者:范彬,狄卫华,米开朗基杨 ...

  3. [ZT] 酒店大洗脑:最全各大国际酒店集团族谱图

    原文地址: http://www.licai.com/yuedu/201411-62884.html 如果你对各大耳熟能详的国际酒店管理集团还有什么问题,相信今天和你分享的各大酒店集团家族系谱图和最全 ...

  4. 2013 Multi-University Training Contest 8

    HDU-4676 Sum Of Gcd 题意:给定一个1-N的全排列序列,N<=20000,有Q组询问,Q<=20000,每组询问给出左右区间[l, r],问区间内的任意两个数的gcd之和 ...

  5. 【转】物业管理与移动互联网科技|微信公众平台,物业app,物业O2O

    [导语]当下,物业管理行业正在接受新科技浪潮的冲击和洗礼,业界企业纷纷探索物业服务的新发展模式.云服务.微社区.微信公众平台.app等,这些本来陌生的词汇在物业管理行业变得耳熟能详.在借助科技手段拓展 ...

  6. MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

    MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...

  7. C2B未来:大数据定制

    昨天看到微信SuperSofter写了一篇文章,有感而发.以便备记. 这是一种典型的C2B模式.阿里不仅仅是在与腾讯拼移动.它的电商本土业务也在稳步推进.近期一个里程碑事件是.阿里包下了美的.九阳.苏 ...

  8. Lucene.Net 2.3.1开发介绍 —— 三、索引(七)

    原文:Lucene.Net 2.3.1开发介绍 -- 三.索引(七) 5.IndexWriter 索引这部分最后讲的是IndexWriter.如果说前面提到的都是数据的结构,那么IndexWriter ...

  9. 互联网创业应该如何找到创意 - RethinkDB创始人Slava Akhmechet的几点建议

    关于作者 我叫Slava Akhmechet,本人是 RethinkDB 的创始人之一,RethinkDB是一个设计来帮助开发者和运营团队来处理无结构数据的一个开源的分布式数据库,用户可以使用它来作为 ...

随机推荐

  1. 通过识别页面内容获得返回值判断后续执行(exists指令的用法)

    本案例主要用到airtest 的exists指令 从指令解释可以知道,当判断某图片不存在的时候,会返回false值 脚本思路即为如果返回值==false则执行A,!=fales则执行B 下图脚本思路, ...

  2. CSS-02-css的三种基础选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. hash算法与拉链法解决冲突

    <?php class HashNode { public $key; public $value; public $nextNode; public function __construct( ...

  4. Web自动化测试项目(二)BasePage实现

    一.BasePage介绍 创建一个BasePage类,对Selenium Api进行二次封装 为了快速创建项目并投产,用到的Selenium Api才进行封装,没用到的则不封装 优先封装最重要的几个方 ...

  5. Linux测试环境简单使用教程

    0. 本blog 简单说明一下 Linux测试环境尤其是 CentOS测试环境的开发测试使用, 教程可能不会很长, 主要是入门. 0.1 Linux简介: Linux 的历史基本上不用阐述, linu ...

  6. Idea-LifecycleException when deploying

    案例 今天第一次用idea构建项目,出现了如下问题: FAIL - Application at context path /myWebApp could not be started FAIL - ...

  7. ipwry源码

    qqwry.ipwry都是cnss(http://blog.csdn.net/cnss/article/details/136069)出品,终于找到了源码,下载地址:http://download.c ...

  8. css 浏览兼容问题及解决办法 (1)

    主流浏览器css兼容问题的总结 最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑. ...

  9. 9.3.2 map端连接-CompositeInputFormat连接类

    1.1.1         map端连接-CompositeInputFormat连接类 (1)使用CompositeInputFormat连接类需要满足三个条件: 1)两个数据集都是大的数据集,不能 ...

  10. The related functions and attributes for managing attributes - 操作属性的重要属性和函数

    特性 property 都是类属性(静态变量),但是特性管理的其实是实例属性的存取, ****** 回顾 -'类方法' classmethod 和 '静态方法' staticmethod 皆可以访问类 ...