Sass与Compass——回顾
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——回顾的更多相关文章
- 分享15款很实用的 Sass 和 Compass 工具
Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...
- Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]
demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化cs ...
- 揭开Sass和Compass的神秘面纱
揭开Sass和Compass的神秘面纱 可能之前你像我一样,对Sass和Compass毫无所知,好一点儿的可能知道它们是用来作为CSS预处理的.那么,今天请跟我一起学习下Sass和Compass的一些 ...
- Sass学习之路:Sass、Compass安装与命令行
导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...
- Sass和Compass制作雪碧图
1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...
- 【Sass初级】开始使用Sass和Compass
转自:http://www.w3cplus.com/preprocessor/beginner/getting-started-with-sass-and-compass.html 如果你的朋友.同事 ...
- Sass和Compass设计师指南
注:配合查看:Sass 为什么使用Sass和Compass? 1.减少重复工作,加快开发进度 2.使用变量,便于记忆,变量使用$符号开头 3.自动转换RGBA颜色值 .color { color: $ ...
- SASS、COMPASS 安装指南
如果你还不知道 SASS 和 COMPASS 是什么,可以参看http://sass-lang.com 和http://compass-style.org,近期可能会更新一篇介绍性的入门教程,但 是本 ...
- rub、sass和compass的安装
长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境 ...
随机推荐
- 一次性能优化,tps从400+到4k+
项目介绍 路由网关项目watchman ,接收前端http请求转发到后端业务系统,功能安全验证,限流,转发. 使用技术:spring boot+ nreflix zuul,最开始日志使用slf4j+l ...
- git如何正确回滚代码
git如何正确回滚代码 方法一,删除远程分支再提交 ①首先两步保证当前工作区是干净的,并且和远程分支代码一致 $ git co currentBranch $ git pull origin curr ...
- js prototype 和constructor
1.function 和object 都有 constructor 和prototype 2. var a=new Animal() (animal 是function或Object) a 有 con ...
- Java链表的一些操作:
[还有一些其他的算法提]http://blog.csdn.net/WalkingInTheWind/article/category/906980 [转]http://blog.csdn.net/lu ...
- OI队内测试一【数论概率期望】
版权声明:未经本人允许,擅自转载,一旦发现将严肃处理,情节严重者,将追究法律责任! 序:代码部分待更[因为在家写博客,代码保存在机房] 测试分数:110 本应分数:160 改完分数:200 T1: 题 ...
- React Native 之 搭建开发环境
现在只能在MAC系统上安装. 1. 首先,HomeBrew 这是一个包管理库,用来下载其它工具. 打开网站:brew.sh 网页有个命令 /usr/bin/ruby -e "$(curl - ...
- Visual Studio Team Services 帐户管理操作
Visual Studio Team Services 网址: https://www.visualstudio.com/ 1.登陆 2.登陆后新建账户 3.删除团队项目 (1)点击自己的Visual ...
- UVa 10057 - A mid-summer night's dream
题目大意:给n个数,找一个数A使得A与这n个数的差的绝对值最小.输出A最小的可能值,n个数中满足A的性质的数的个数以及满足A性质的不同的数的个数(不必从这n个数中挑选). 看见绝对值就想到了数轴上点之 ...
- linux上编译安装python2.7.5
下载python2.7.5,保存到 /data/qtongmon/software http://www.python.org/ftp/python/ 解压文件 tar xvf Python-2.7. ...
- C++中vector 容器的基本操作
vector是一种简单高效的容器,具有自动内存管理功能.对于大小为n的vector容器,它的元素下标是0~n-1. vector有二个重要方法: begin(): 返回首元素位置的迭代器. ...