一、为什么我们要使用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. RabbitMq 深入了解

    积少成多 ----  仅以此致敬和我一样在慢慢前进的人儿 问题一:什么是RabbitMq 下面就是些个人的感受, rabbitmq 就是一个遵循AMQP协议(这个是啥不清楚) 的消息队列的实现,用于服 ...

  2. 【读书笔记】关于《精通C#(第6版)》与《C#5.0图解教程》中的一点矛盾的地方

    志铭-2020年2月8日 03:32:03 先说明,这是一个旧问题,很久很久以前大家就讨论了, 哈哈哈,而且先声明这是一个很无聊的问题,

  3. Solaris磁盘镜像恢复

    注:此文章笔者实验记录,欢迎大家指正 Solaris磁盘镜像恢复方法一: 系统启动,开机提示子镜像需要维护: 查看磁盘镜像信息 进入系统后,metastat -pc 和metadb #查看镜像状态与m ...

  4. 验证码,java

    这几天打算写一个验证码出来 遇到了几个问题 imageio写入失败:原因我创建文件的时候是先建立一个text文本,然后修改后缀,图片写不进去,还有没有编译 图像扭曲:粘连的问题,目前解决图像扭曲的问题 ...

  5. Mysql:自动化备份

    简介 在这个数据为王的时代,数据的备份十分重要,这里就分享一篇mysql数据库自动备份的脚本(是从网上搜到的),其将配置文件和备份脚本分离,提高了安全性,脚本风格规范严谨,分享给大家希望对需要的小伙伴 ...

  6. num05---装饰模式

    当系统需要新的功能的时候,一般都是向旧的类中添加新的代码.比如一个人这个类,需要新增穿衣的功能,那么就会在人这个类中去添加对应的穿衣方法代码,用来增强人这个类的行为功能.但是这样做,会因为新加入的字段 ...

  7. POP and IMAP - Post Office Protocol and Internet Message Access Protocol

    POP and IMAP - Post Office Protocol and Internet Message Access Protocol 用来从 SMTP Server 上下载邮件的协议. P ...

  8. k8s系列---Service之ExternalName用法

    需求:需要两个不同的namespace之间的不同pod可以通过name的形式访问 实现方式: A:在其他pod内ping [svcname].[namespace] ping出来到结果就是svc的ip ...

  9. Linux 服务器注意事项

    1.创建时  数据文件一定分盘挂载 2.LVM 虚拟磁盘卷是否创建    有争议??? 3.hosts 文件 最好添加本机映射          主机名  127.0.0.1      4.iptab ...

  10. AJAX传输图片文件

    AJAX传输 例:const xhr = new XMLHttpRequest(); // 此方法因为状态改变被调用多次,实测执行三次(1->2->4) xhr.onreadystatec ...