FED实验室 - 专注WEB端开发和用户体验

Compass学习

CSS预处理 煦涵 4495℃ 0评论

一、What is Compass?

Compass是Sass的工具库,Compass在SASS的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,类似Javascript和jQuery、Ruby和Rails、python和Django的关系。

二、Install

Compass是用Ruby语言开发的,所以安装它之前,必须安装Ruby。
1.Linxu/OS X:
命令行模式下:sudo gem install compass
2.Windows:
进入Ruby命令:gem install compass

三、Project

1.创建项目:F:\compass_proj

C:\Users\Benjamin>F:

F:\>compass create compass_proj回车
directory compass_proj/
directory sass/
directory stylesheets/
create config.rb
create screen.scss
create print.scss
create ie.scss
create ie.css
create print.css
create screen.css

*********************************************************************
Congratulations! Your compass project has been created.

看到这,项目创建成功!,然后就可以增加样式了!

2.项目编译
a)compass compile
进入到项目根目录下运行该命令,该命令会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中。

F:\>cd compass_proj
F:\compass_proj>compass compile
unchanged sass/ie.scss
unchanged sass/print.scss
unchanged sass/screen.scss

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

F:\compass_proj>compass compile --force
identical stylesheets/ie.css
identical stylesheets/print.css
identical stylesheets/screen.css

c)compass --output-style
默认状态下,编译出来的css文件带有大量的注释。但是,生产环境需要压缩后的css文件,这时要使用--output-style (expanded/nested/compact/compressed)。

F:\compass_proj>compass compile --output-style compressed --force
overwrite stylesheets/ie.css
overwrite stylesheets/print.css
overwrite stylesheets/screen.css

d)compass watch
运行该命令后,只要sass文件夹发生变化(修改、增加文件),scss文件就会被自动编译成css文件。

F:\compass_proj>compass watch
>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected at 13:08:45 to: ie.scss
overwrite stylesheets/ie.css
>>> Change detected at 13:09:13 to: index.scss
create stylesheets/index.css
>>> Change detected at 13:09:36 to: index.scss
overwrite stylesheets/index.css

四、Compass模块

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

a)CSS3 :Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes

CSS3模块提供了20种命令:
border-radius,appearance,backgorund-clip,box-shadow,box-sizing等
b)Typography:Provides basic mixins for common typography patterns
提供板式功能,指定链接、列表、文本等样式

c)Utilities :Provides basic mixins for common styling patterns.
提供某些不属于其他模块的功能,如清除浮动,表格样式,sprites等
2.Non imported modules

a)Reset :Adds a CSS Reset into your stylesheet.
重置浏览器默认样式

b)Layout:Page layout module.
提高布局功能

五、Helper

提供了一系列函数,如image-width(),image-height(),image-url()可以获取图片的相关信息

六、Reference

http://compass-style.org/reference/compass/

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (0)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址