compass初探

1、安装compass:

sudo gem install compass

如果你用的是Windows系统,那么要省略前面的sudo。

2、项目初始化

接下来,(首先要进入目标目录。)要创建一个你的Compass项目,假定它的名字叫做myproject,那么在命令行键入:

进入目标目录语法:

列1、根目录是驱动器的目录树状结构的顶层,要返回到根目录,在命令行输入:cd \

例2、如果想返回到上一层目录,在当前命令提示符下输入cd..如下图:

例3、如果想进入下一层目录,在当前命令提示符下输入cd 目录名。在命令提示符C:\>下输入cd “documents and setting”如下图:

例4、如果想改变当前驱动器的目录c:\documents and settings,进入到d驱动器默认目录,在当前命令行输入d: 执行后结果如下图

例5使用时含有驱动器号 cd则显示该驱动器的当前目录,在C盘当前目录下输入cd e:如下图:

例6、如果想当前C驱动器上将d驱动器上的默认目录更改为D:\word,在命令行输入cd d:\word 如下图:

不信你可以验证一下,输入d回车 D盘的默认目录已发生改变如下图

例7、如果当前目录是C:\Documents and Settings 要切换到 d:\word 在命令行输入cd d:\word回车后再输入d: 如下图
例8、在上一例中要进入到d:\word要输入两次,第一次输入cd d:\word 第二次输入d: 能否一步到位进入到d:\word目录呢?答案是肯定的,还是以上图为例只要加上参数/D即可,如cd /d d:\word执行结果如下图:注意:此参数在2k/xp/vista/win7/下有效

compass:

接下来,要创建一个你的Compass项目,假定它的名字叫做myproject,那么在命令行键入:

compass create myproject

当前目录中就会生成一个myproject子目录

进入该目录:

cd myproject

你会看到,里面有一个config.rb文件,这是你的项目的配置文件。还有两个子目录sass和stylesheets,前者存放Sass源文件,后者存放编译后的css文件。

接下来,就可以动手写代码了。

四、编译

在写代码之前,我们还要知道如何编译。因为我们写出来的是后缀名为scss的文件,只有编译成css文件,才能用在网站上。

Compass的编译命令是

compass compile

该命令在项目根目录下运行,会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中。

默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用--output-style参数。

 compass compile --output-style compressed

Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用--force参数

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的模块

Compass采用模块结构,不同模块提供不同的功能。目前,它内置五个模块:

 * reset
 * reset
 * css3
 * layout
 * typography
 * utilities

下面,我依次介绍这五个内置模块。它们提供Compass的主要功能,但是除了它们,你还可以自行加载网上的第三方模块,或者自己动手编写模块。

六、reset模块

通常,编写自己的样式之前,有必要重置浏览器的默认样式。

写法是

 @import "compass/reset";

上面的@import命令,用来指定加载模块,这里就是加载reset模块。编译后,会生成相应的css reset代码

七、CSS3模块

目前,该模块提供19种CSS3命令。在这里,我介绍其中的三种:圆角、透明和行内区块。

7.1 圆角

圆角(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);

7.2 透明

透明(opacity)的写法为

 @import "compass/css3";
  #opacity {
    @include opacity(0.5);
  }

编译后生成

#opacity {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
    opacity: 0.5;
  }

opacity的参数0.5,表示透明度为50%。

完全透明的写法是

@include opacity(0);

完全不透明则是

@include opacity(1);

7.3 行内区块

行内区块(inline-block)的写法为

@import "compass/css3";
  #inline-block {
    @include inline-block;
  }

编译后生成

#inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
  }

八、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命令,可以直接调用。

时间: 2024-10-08 04:04:40

compass初探的相关文章

compass sass

compass creat xxxxx(项目名) -r bootstrap-sass --using bootstrap 1.打开项目根目录下的 config.rb 文件2.搜索 line_comments 关键词,默认应该是 # line_comments = false3.去掉前面的 #,保存 config.rb4.重新执行 compass compile 普通编译运行命令 compass compile

进阶之初探nodeJS

一.前言 在"初探nodeJS"随笔中,我们对于node有了一个大致地了解,并在最后也通过一个示例,了解了如何快速地开启一个简单的服务器. 今儿,再次看了该篇随笔,发现该随笔理论知识稍多,适合初级入门node,固萌生一个想法--想在该篇随笔中,通过一步步编写一个稍大一点的node示例,让我们在整体上更加全面地了解node. so,该篇随笔是建立在"初探nodeJS"之上的,固取名为"进阶之初探nodeJS". 好了,侃了这多,那么我们即将实现一个

从273二手车的M站点初探js模块化编程

前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数据. 273这个M站点是产品推荐我看的.第一眼看这个产品时我就再想他们这个三次加载和翻页按钮的方式,那么小分页的pageIndex是怎么计算的.所以就顺便看了下源码. 提到看源码时用到了Chrome浏览器的格式化工具(还是朋友推荐我的,不过这个格式化按钮的确不明显,不会的话自行百度). 三次加载和分

[转载]HDFS初探之旅

转载自 http://www.cnblogs.com/xia520pi/archive/2012/05/28/2520813.html , 感谢虾皮工作室这一系列精彩的文章. Hadoop集群(第8期)_HDFS初探之旅 1.HDFS简介 HDFS(Hadoop Distributed File System)是Hadoop项目的核心子项目,是分布式计算中数据存储管理的基础,是基于流数据模式访问和处理超大文件的需求而开发的,可以运行于廉价的商用服务器上.它所具有的高容错.高可靠性.高可扩展性.高

MongoDB初探系列之二:认识MongoDB提供的一些常用工具

在初探一中,我们已经可以顺利的将MongoDB在我们自己的机器上跑起来了.但是在其bin目录下面还有一些我们不熟知的工具.接下来,将介绍一下各个小工具的用途以及初探一中MongoDB在data文件夹下创建的文件的用途. 1.bin目录下面的各种小工具简介及使用方式 bsondump.exe 用于将导出的BSON文件格式转换为JSON格式mongo.exe mongoDB的客户端 mongod.exe 用于启动mongoDB的Server mongodump.exe 用于从mongodb数据库中导

Asynchronous Pluggable Protocols 初探

Asynchronous Pluggable Protocols,异步可插入协议,允许开发者创建可插协议处理器,MIME过滤器,以及命名空间处理器工作在微软IE4.0浏览器以及更高版本或者URL moniker中.这涉及到Urlmon.dll动态链接库所公开(输出)的可插协议诸多功能,本文不进行深入的原理讲解,只对它其中之一的应用进行解析,那就是如何将一个应用程序注册为URL协议. 应用场景: tencent协议: 当我们打开"tencent://message/?uin=要链接的QQ号 &qu

重新认识HTML,CSS,Javascript 之node-webkit 初探

今天我们来系统的.全面的 了解一下前端的一些技术,将有助于我们写出 更优秀的 产品 出来. 什么是HTML? HTML 是用来描述网页的一种语言. HTML 包含一些根节点,子节点,文本节点,属性节点,组成, 它通过一系列预定义标签来描述网页结构,如: <title>This is title</title> ,这个表明该网页的标题是 This is title. 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets),它描述浏览器显示如何显示htm

java进阶06 线程初探

线程,程序和进程是经常容易混淆的概念. 程序:就是有序严谨的指令集 进程:是一个程序及其数据在处理机上顺序执行时所发生的活动 线程:程序中不同的执行路径,就是程序中多种处理或者方法. 线程有两种方法实现 一:继承Thread 覆盖run方法 package Thread; public class Thread1 { public static void main(String[] args){ MyThread1 thread1=new MyThread1(); thread1.setName

数据加密解密初探

在一次网络通信或者是进程通信中,如果传输数据采用明文的方式,那么很容易被第三方"窃听"到,安全性难以保障. 而所谓加密是让数据从明文变成密文,传输过程中是密文,传送过去之后对方接收到的也是密文.--可以理解为密文就是乱码,看不出内在的任何意义,通常也都是逐位对应的. 在接收方接收到密文之后只有把它还原为原来的样子才可以理解对方说的具体是什么,此过程就叫做解密. 所谓系统的安全要实现的目标应该包括:机密性-confidentiality,完整性-integrity 和可用性-availa