北京总部

CSS开发:5分钟快速上手Compass

作者: 来源: 时间: 2017-03-14 10:24:15

 Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护。但是,只有搭配Compass,它才能显出真正的威力,学会了Compass,你的CSS开发效率会上一个台阶。

Compass与CSS的关系类似于JQuery与Java,封装了一系列有用的模块和模板,补充Sass的功能。

01

安装

  • Compass是用Ruby语言开发的,所以安装它之前,必须安装Ruby

     Ruby安装地址:http://www.ruby-lang.org/en/downloads/

  • 命令行模式(windows去掉sodu)

     sudo gem install compass

     Compass是基于Sass的,所以Ruby会自动帮我们安装好Sass。

  • 如果gem安装失败,可以手动下载

     下载地址:https://rubygems.org/gems/compass

  • 命令行模式(windows去掉sodu)

     Sudo gem install --local compass.gem

02

项目初始化&编译

  • 创建compass项目(命令行模式)

     compass create myproject

     cd myproject

  • Compass编译命令

     compass compile

  • Compass自动编译命令

     compass watch

03

Compass模块

Compass内置五个模块,分别为reset、 css3、 layout、 typography、 utilities。

reset模块

  • 重置浏览器默认样式

     @import "compass/reset";

css3模块

  • 提供19种CSS3命令,为css3属性添加不同浏览器兼容性前缀

     以transition属性为例transition: all .5s;

    @import "compass/css3"; @include transition(all,.5s);

  • 编译结果为:

-moz-transition: all, 0.5s; -o-transition: all, 0.5s; -webkit-transition: all, 0.5s; transition: all, 0.5s;

layout模块

  • 提供布局功能

     以sticky-footer()为例,指定的元素始终会出现在浏览器最低端

    @import "compass/layout"; @include sticky-footer(54px);

Typography 模块

  • 提供版式功能

以链接为例,使用link-colors()为不同状态下设置不同的color

@import "compass/typography";

@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);

utilities模块

  • 该模块提供某些不属于其他模块的功能。

例如做一个清除浮动的class

 import "compass/utilities/";

.clearfix { @include clearfix; }

除了这5个模块,Compass还提供了一系列好用的函数。

例如如image-width()和image-height()返回图片的宽和高。

$pic_path: "../images/pic.jpg"; #pic{ background: url($pic_path); width: image-width($pic_path); height: image-height($pic_path); }

返回结果如下:

#pic { background: url("../images/pic.jpg"); width: 590px; height: 100px; }

这么做,以后就省去引入图片时,还要查看图片大小的问题了。

赶快试试Compass,去感受它真正的威力吧!

这是最好的时代,这是最坏的时代

It was the best of times, it was the worst of times

每一个时代,都会成全一部分人

你的选择决定你的时代

抓住互联网的巨大机遇,成就自我别再犹豫!

中软卓越以人才供应链为导向,提供基于岗位的项目实战训练,投重金研发了专门针对大学生的准员工“5R(5Real)”实训课程体系(5R即:真实的工作环境、真实的项目经理、真实的项目案例、真实的工作压力、真实的工作机会),致力于培养符合社会实际需求的软件人才,多年来已累计为自身及全行业培养合格准员工超过10万人。

 想学IT找小卓


留言微信:您的姓名、联系方式、所在地区、想了解的课程

登录中软卓越官方网站客服咨询:http://etc.chinasofti.com 或 http://www.zretc.com

拨打电话:400-666-3775

与小卓成为QQ好友:3177669389


相关阅读

更多

中软卓越java培训地址:北京市海淀区科学院南路2号融科资讯中心C座北楼12层 联系电话:400-666-3775 邮箱账号:etc-marketing@chinasofti.com

©2008-2016 北京中软国际教育科技股份有限公司 京ICP备14058756号-2