一、为什么我们要使用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. SIFT特征匹配算法介绍

    原文路径:https://www.learnopencv.com/histogram-of-oriented-gradients/ 按语:偶得SIFT特征匹配算法原理介绍,此文章确通俗易懂,分享之! ...

  2. vscode打开文件,中文显示乱码(已解决)

    之前使用vscode打开keil的文件后,发现显示乱码,网上查找资料发现大多是这种方法:将files.autoGuessEncoding改为true,但是并没有用. 发现第二种方法为:在vscode中 ...

  3. Spring注解开发系列Ⅵ --- AOP&事务

    注解开发 --- AOP AOP称为面向切面编程,在程序开发中主要用来解决一些系统层面上的问题,比如日志,事务,权限等待,Struts2的拦截器设计就是基于AOP的思想,横向重复,纵向抽取.详细的AO ...

  4. win10搭建本地服务器(IIS)

    若想外网也可以访问使用NATAPP:https://natapp.cn/article/natapp_newbie 参考文章: https://segmentfault.com/a/119000001 ...

  5. mac如何用quick look预览多个文件或者图片

    1.先选中要查看的多个文件,然后点击 空格键 2.按住 command+return 就可以同时预览多个文件了 如果想全屏预览,则在1中,按住 option+空格键 ,然后再进行2 ,就实现全屏预览了 ...

  6. #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验

    #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验 一.续上前言 关于这个小玩意的产品思考,假设我暂时把他叫我是月老热心人 这是一个没有中心的关系链,每个人进入以后都是以自己为中 ...

  7. VS2013下搭建SDL开发环境

    什么是SDL? SDL是 "Simple DirectMedia Layer"的缩写,它是一个开源的项目. 为多媒体编程而设计 SDL是一个跨平台的多媒体库,它通过OpenGL和2 ...

  8. docker nginx 实现图片预览

    一.实现 nginx http图片预览 1.创建本地配置文件目录以及配置文件 两种方式: 1.1.docker nginx将配置文件抽离到了/etc/nginx/conf.d,只需要配置default ...

  9. centos7中搭建ftp服务

    博客搬家: centos7中搭建ftp服务 最近想和同学共享一些文件资源,于是在实验室服务器上搭建个ftp服务,本博客记录一下配置的流程.过程基本是参照别人的方法来做的,博客也是在别人博客基础上修改的 ...

  10. [Python源码剖析]获取Python小整数集合范围

    #!/usr/bin/env python #-*- coding=utf-8 -*- small_ints = dict() for i in range(-10000,10000): small_ ...