compass 是sass的一个工具库
  compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能,

  安装:
    compass是用 ruby语言开发的,所以安装它之前必须安装ruby。
  命令:

    gem install compass
  项目初始化:
    要创建一个你的Compass 项目,如果项目的名字叫 myproject
      compass create myproject
    会在当前的目录下生成这个目录,里面有config.rb文件,还有两个子目录sass 和 stylesheets 前者存放sass 源文件,后者放编译后的
css文件。

  编译:
    我在开发的时候写出来的是文件后缀名为scss的文件。只有编译成css文件,才能用到网站上。
      compass 的编译命令为
        compass compile
    该命令在项目根目录下运行,将会sass 子目录中的scss 文件编译成css文件,保存在stylesheets子目录中。
      默认编译出来的css 文件带有大量的注释,生产环境需要压缩后的css文件
        compass compile --output-style compressed
    如果重新编译未修改过的文件
        compass compile --force
    除了使用命令参数,还可以在配置文件config.rb 中指定编译模式。

      output_style = :expanded
        :expanded 表示编译后保留原格式, 其他值还包括: nested,
        :compact和compressed 进入生产阶段后,就要改为:compressed模式。
          output_style = :compressed
    也可以通过指定environment的值(:production或者:development),智能判断编译模式。

      environment = :development
        output_style = (environment == :production) ? :compressed : :expanded

    在命令行模式下,除了一次性编译命令,compass还有自动编译命令

      compass watch
        只要scss文件发生变化,就会被自动编译成css文件。

compass 的模块

    compass采用模块结构,不同模块提供不同的功能,内置5个模块。
    reset css3 layout typography unilities

  reset模块

    在编写自己的样式之前,有必要重置浏览器的默认样式。
      写法是:
        @import "compass/reset"
    上面的@import命令,用来指定加载模块,这里就是加载reset模块。编译后,会生成相应的css reset代码。

  CSS3模块
    该模块提供24 中css3命令。如:
      圆角(border-radius) 的写法,
        @import "compass/css3";
            .rounded {
                @include border-radius(5px);
            }
    上面的@include命令,表示调用某个mixin(类似于C语言的宏),5px是参数,这里用来指定圆角的半径。

    编译后的代码为:
      .rounded {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
      }

    如果只需要左上角为圆角,写法为
    @include border-corner-radius(top, left, 5px);

  layout模块
    该模块提供布局功能,
    比如,指定页面的footer部分出现在浏览器的最低端。
      @import "compass/layout";
        #footer {
          @include sticky-footer(54px);
        }
    指定子元素占满父元素的空间:

      @import "compass/layout";
        #stretch-full {
          @include stretch;
        }
  typography模块
    该模块提供板式功能
      比如,指定链接颜色的mixin为:
        link-colors($normal, $hover, $active, $visited, $focus);
      使用时写成:
        @import "compass/typography";
          a {
            @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
        }

  utilities模块

    该模块提供某些不属于其他模块的功能。
    比如,清除浮动:

      import "compass/utilities/";
        .clearfix {
          @include clearfix;
       }
    比如表格:
      @import "compass/utilities";
        table {
          @include table-scaffolding;
        }

    编译后
       table th {
        text-align: center;
        font-weight: bold;
        }
      table td,
      table th {
        padding: 2px;
      }
      table td.numeric,
      table th.numeric {
        text-align: right;
      }

    Helper函数
      除了模块外,compass还提供了一系列函数。
      有一些有用的函数,image-width() 和image-height() 返回图片的宽和高
      再比如,inline-image()可以将图片转为data协议的数据。

        @import "compass";
        .icon { background-image: inline-image("icon.png");}

        编译后得到
          .icon { background-image: url('data:image/png;base64,iBROR...QmCC');}
            函数与mixin的主要区别是,不需要使用@include命令,可以直接调用。

Sass与Compass——回顾的更多相关文章

  1. 分享15款很实用的 Sass 和 Compass 工具

    Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...

  2. Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]

    demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化cs ...

  3. 揭开Sass和Compass的神秘面纱

    揭开Sass和Compass的神秘面纱 可能之前你像我一样,对Sass和Compass毫无所知,好一点儿的可能知道它们是用来作为CSS预处理的.那么,今天请跟我一起学习下Sass和Compass的一些 ...

  4. Sass学习之路:Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  5. Sass和Compass制作雪碧图

    1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...

  6. 【Sass初级】开始使用Sass和Compass

    转自:http://www.w3cplus.com/preprocessor/beginner/getting-started-with-sass-and-compass.html 如果你的朋友.同事 ...

  7. Sass和Compass设计师指南

    注:配合查看:Sass 为什么使用Sass和Compass? 1.减少重复工作,加快开发进度 2.使用变量,便于记忆,变量使用$符号开头 3.自动转换RGBA颜色值 .color { color: $ ...

  8. SASS、COMPASS 安装指南

    如果你还不知道 SASS 和 COMPASS 是什么,可以参看http://sass-lang.com 和http://compass-style.org,近期可能会更新一篇介绍性的入门教程,但 是本 ...

  9. rub、sass和compass的安装

    长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境 ...

随机推荐

  1. RunLoop基础

    序言 RunLoop一直是比较高级而又比较神秘的技术,一直以来都没有深入去阅读过苹果给出的官方文档.本篇文章就讲讲苹果官方文档中所介绍的RunLoop,再加上其开源性,让我们一起深入去研究其特性及与线 ...

  2. 不同版本的mysql字符集的默认编写

    原来在5.1版本时,为了解决中文乱码问题设置默认字符集为utf8时,在my.ini内的 [mysql] 和 [mysqld] 项中都是写: default-character-set=utf8 到了5 ...

  3. Delphi获取文件的大小(实际&物理)

    源:获取文件的大小(实际&物理) class function TDuoFile.GetFileSize(const AFile: TFileName): Int64; var sr:TSea ...

  4. android测试之——Instrumentation(一)

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...

  5. 学习c++语言应该牢记的50条准则,同样学习其他语言也一样

    1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<Thinking In C++>,不要看<C++变成死相>: 3.看<The C++ Programm ...

  6. LPC1768IAP(详解,有上位机)

    之前说了stm32的iap编程,今天天气真好,顺手就来说说lpc1788的iap编程(没看前面的请查看stm笔记下的内容) 首先是flash的算法,lpc1768并没有寄存器来让我们操作flash,他 ...

  7. 在spring 3.0中的@value

    在spring 3.0中,可以通过使用@value,对一些如xxx.properties文件 中的文件,进行键值对的注入,例子如下: 1 首先在applicationContext.xml中加入:   ...

  8. libusb开发者指南(转)

    源:libusb开发者指南 译者: gashero 作者: Johannes Erdfelt 日期: 2010-04-17 地址: http://libusb.sourceforge.net/doc/ ...

  9. centos7 安装R和Rstudio客户端

    #官网下载R和Rstudio 我下载的是 R-3.2.1.tar.gz和rstudio-0.99.467-x86_64.rpm两个版本 rstudio没有看见有centos版的,下的这个RStudio ...

  10. LogBack log出力路径

    转自:http://blog.csdn.net/z69183787/article/details/30284391 请看下面这段配置,这是无法工作的: <?xml version=" ...