中软首页
●  教育部授予:“软件工程专业大学生实习实训基地”资质
●  商务部授予:“中国服务外包示范培训中心”资质
●  工信部授予:国家信息技术紧缺人才培养工程“521计划”资格
●  获得腾讯授予:中国IT教育十大影响力品牌

≡ 技术知识库
当前位置:网站首页>技术知识库>>文章内容
CSS开发:5分钟快速上手Compass
作者:   来源:    时间:2017-03-14 10:06:53    字体:[大] [中] [小]

   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


中软卓越等你哦!

 想学IT找小卓


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

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

拨打电话:400-666-3775

与小卓成为QQ好友:3177669389


中软卓越等你哦!

 想学IT找小卓


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

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

拨打电话:400-666-3775

与小卓成为QQ好友:3177669389


中软卓越等你哦!


中软国际教育科技微网页二维码
版权所有 © 2008-2014 北京中软国际教育科技股份有限公司 京ICP备09078625号-2 京公安备11010802014778号 隐私声明 | 联系我们 | 网站地图

华东

华南

华中

华北

西北

西南

东北