compass 是一个开源的基于 sass 的 css 编辑框架;sass 本身只是一个编译器,compass 在它的基础上,封装了一系列有用的模块和模板,在使用的时候直接调用就行了,不需要我们自己再去手动写我们需要的一些常用 css 模块;

安装 compass 前必须要先安装 ruby,安装好 ruby 后,执行以下命令安装 compass:

sudo gem install compass

大陆有可能执行不了,原因都懂的,不过我们可以手动安装:

直接去 rubygems.org 下载,然后执行本地安装,注意要先下载 compass 的依赖程序,页面最下方有介绍需要哪几个依赖程序;

安装完后,下面介绍一下 compass 的一些常用命令:

  • compass create jaySite

    创建一个 jaySite 的项目,这样当前目录中会生成一个 jaySite 的目录,里面包含 sass(存放sass源文件) 和 stylesheets(存放编译后的css文件) 两个目录和一个 config.rb 配置文件

  • compass compile

    将 sass 编译成 css,还记得上面说的,编译后的 css 文件是保存在 stylesheets 目录内的哟;

    compass 只编译发生变动过的文件,如果需要重新编译已经编译过的文件,可以加 --force 参数

    默认编译出来的 css 带有大量的注释,所以我们可以使用 --output-style 参数来选择执行编译的模式:

    比如,我们有如下一个 jay.scss 源文件:

      $baseSize: 12px;
    
      h1 {
          font-size: $baseSize * 2; /* double */
          span {
              font-size: $baseSize;
          }
      }
    
    • compass compile —output-style compressed,编译成压缩后的 css 适合生产环境使用;

        h1{font-size:24px}h1 span{font-size:12px}
      
    • compass compile —output-style nested —force,编译成嵌套缩进带注释的格式;

        /* line 3, ../sass/jay.scss */
        h1 {
            font-size: 24px;
            /*double;*/ }
            /* line 6, ../sass/jay.scss */
            h1 span {
                font-size: 12px; }
      
    • compass compile —output-style expanded —force,编译成没有嵌套的、扩展的带注释格式;

        /* line 3, ../sass/jay.scss */
        h1 {
            font-size: 24px;
            /*double;*/
        }
        /* line 6, ../sass/jay.scss */
        h1 span {
            font-size: 12px;
        }
      
    • compass compile —output-style compact —force,编译成简洁的带注释格式;

        /* line 3, ../sass/jay.scss */
        h1 { font-size: 24px; /*double;*/ }
        /* line 6, ../sass/jay.scss */
        h1 span { font-size: 12px; }
      

      除了使用命令行参数,进行编译外,我们也可以修改 config.rb 这个配置文件来指定编译模式,在文件中加入以下代码:

        output_style = :expanded
      

      如果要去除编译后 css 文件中对应 scss 源文件的来源注释,可以在 config.rb 中设置

        line_comments = false
      
  • compass watch

    运行该命令后,会自动监听 scss 文件的变化,并自动编译成 css 文件

  • 关于 compass 的更多学习,可以去官方网站查看或者去看一看阮一峰老师的compass用法指南