sass-compass之一

这几天在写静态页面比较多，纯用css写复用性不太好，于是就看了看有没有什么工具，于是就发现了sass和compass。

Sass是一种"CSS预处理器"，可以让CSS的开发变得简单和可维护。但是，只有搭配Compass，它才能显出真正的威力。

一、Compass是什么？

简单说，Compass是Sass的工具库（toolkit）。

Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

二、安装

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

假定你的机器（Linux或OS X）已经安装好Ruby，那么在命令行模式下键入：

　　sudo gem install compass

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

正常情况下，Compass（连同Sass）就安装好了。

三、项目初始化

接下来，要创建一个你的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
　　* 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命令，可以直接调用。

sass-compass之一相关推荐

SASS+Compass基本使用，结合JavaScript实现随机点名小系统
SASS+Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over,效果请看(5),代码解释请看源码. (1) ...
sass + compass
文章目录 compass compass 是什么?为什么要学习 compass ? compass 详解写在前面: sass 是 css 预编译语言,使用 sass 在团队合作和项目管理上有很大的优 ...
使用Sass预定义一些常用的样式，非常方便（转）
SS预处理技术现在已经非常成熟,比较流行的有Less,Sass,Stylus,在开发过程中提升我们的工作效率,缩短开发时间,方便管理和维护代码,可以根据自己的喜好选择一款自己喜欢的工具开发,使用很接近 ...
css 预处理器 less sass
文章目录 1. less 1.1 less 的安装 1.2 less用法 1.2.1 命令行用法 1.2.2 变量 1.2.3 混合 1.2.4 嵌套 2. Sass 2.1 Sass简介 2.1.1 ...
web前端之sass简介
Sass简介大家都知道,js 中可以自定义发量,css 仅仅是一个标记语言,不是编程语言,因此不可以自定义发量.不可以引用等等. 面对这些问题,我们现在来引入 Sass,简单的说,他是 css 的升 ...
Less/Sass预处理器
Less,Sass预处理器教程 1.0 CSS预处理器的介绍 CSS预处理器基于CSS的另一种语言通过工具编译成CSS 添加了很多CSS不具备的特性能提升CSS文件的组织方式 CSS预处理器到底 ...
如何在div中将绝对定位的元素居中？
我需要在窗口中心放置一个div (带有position:absolute; )元素. 但是我遇到了问题,因为宽度未知 . 我试过了但是,由于宽度是响应性的,因此需要对其进行调整. .center { ...
2018前端常见问题整理
$HTML, HTTP,web综合问题 1.前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要 ...
2015-2016前端架构体系技术
一.框架与组件 **bootstrap等UI框架设计与实现伸缩布局:grid网格布局基础UI样式:元素reset.按钮.图片.菜单.表单组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组 ...
精选 GitHub 值得收藏的100个前端项目
作者:小明小明长大了博客:https://www.jianshu.com/p/72ca8192f7b8 引言整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者 ...

sass-compass之一

sass-compass之一相关推荐

最新文章

热门文章