一、为什么我们要使用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. hash算法与拉链法解决冲突

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

  2. ios--->instrument的leaks来检查内存泄漏

    instrument来检查内存泄漏 1.第一步打开 或者: 然后选择leaks 2.若此时编译出现如下问题,可能是非debug版本造成的,切换成debug版本即可 打开工程的Edit Scheme选项 ...

  3. 剑指offer--二维数组中查找

    剑指offer--二维数组中查找 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序, 每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组 ...

  4. abp vnext2.0之核心组件模块加载系统源码解析与简单应用

    abp vnext是abp官方在abp的基础之上构建的微服务架构,说实话,看完核心组件源码的时候,很兴奋,整个框架将组件化的细想运用的很好,真的超级解耦.老版整个框架依赖Castle的问题,vnext ...

  5. CTF--HTTP服务--暴力破解

    开门见山 1. 扫描靶机ip,发现PCS 192.168.1.103 2. 用nmap扫描靶机开放服务和服务版本 3. 再扫描全部信息 4. 用nikto探测敏感文件 5. 打开敏感网页发掘信息 6. ...

  6. 使用c++标准IO库实现txt文本文件的读与写操作

    练习c++primer中关于输入输出流的操作. 任务是从固定格式的forreading.txt文档中读取相应的数据,转存到forwriting.txt中去. forreading.txt 格式如下: ...

  7. ubuntu 中使用makefile组织c++多文件的简陋方法

    现有类定义Sales_item.hpp Sales_item.cpp 主函数my7_31.cpp(代码来源于c++primer 习题解答7_31) 希望使用makefile在Ubuntu中进行编译链接 ...

  8. Exception | java.security.NoSuchProviderException: no such provider: BC

    背景 今天在用PGP key做JWT签名和验签的时候,转换报了如下错误: org.bouncycastle.openpgp.PGPException: exception on setup: java ...

  9. Web 开发工具类(5) | DateUtils

    日期工具类 import java.text.ParseException; import java.text.ParsePosition; import java.text.SimpleDateFo ...

  10. vue2.x中使用三元表达式绑定class的时候遇到的坑

    这个确实是个坑,而且是来自文档的坑. 首先先看文档对这个的解释: 从实际的代码书写上,文档中的写法,vs code没报错,但是浏览器报了一堆的错. 我试了很多遍,发现类名必须是要用引号引起来,页面上语 ...