• 今天带来compass的使用方式


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

  • 相关阅读:
    Set和Map
    将博客搬至CSDN
    (转)VS制作安装包
    C#俄罗斯方块实现思路及源码
    ASP.NET网站部署过程
    2016百度之星资格赛总结
    数据库编程常见错误总结
    (转)Android 如何全局获取Context
    Android数据文件存储
    关于工程文档中图表的使用
  • 原文地址:https://www.cnblogs.com/dy105525/p/12347275.html
Copyright © 2020-2023  润新知