sass + compass

写在前面：

sass 是 css 预编译语言，使用 sass 在团队合作和项目管理上有很大的优势，所以，目前使用广泛。

关于 sass 的学习，我之前的一篇已经非常详细了。

传送门： Sass教程

---

compass

我准备向你们提出一个你们不可能拒绝的条件，有了compass,sass才迎来了它真正的辉煌。

compass 是什么？为什么要学习 compass ？

compass 是一个 sass 的库，compass 里面有很多封装好的 mixin ，有了它，我们就可以很快的写出完美的，兼容的 样式。

举个例子1：
我们要做一个横向排布包含导航链接的列表，类似这样：

首先，我们的 html 是这样的：

<ul class="nav">
	<li><a href="/">Homea>li>
	<li><a href="/services">Servicesa>li>
	<li><a href="/blog">Bloga>li>
	<li><a href="/contact">Contacta>li>
ul>

然后写 CSS ：

ul.nav {
	border: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
ul.nav li {
	display: inline;
	float: left;
	margin-left: 0;
	padding-left: 4px;
	padding-right: 4px;
}

OK，并不是很难，CSS 本身就是这样。
但是，如果我们有了 compass 以后，我们的工作是这样的：

ul.nav {
  @include horizontal-list;
}

难以置信的简单。
我们再来看一下使用了这个以后，编译后的 css 样式：

ul.nav {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	*zoom: 1;
}
ul.nav li {
	list-style-image: none;
	list-style-type: none;
	margin-left: 0;
	white-space: nowrap;
	display: inline;
	float: left;
	padding-left: 4px;
	padding-right: 4px;
}
ul.nav li:first-child, ul.nav li.first {  // .first是针对低版本浏览器的
	padding-left: 0;
}
ul.nav li:last-child, ul.nav li.last {  // .last是针对低版本浏览器的
	padding-right: 0;
}

可以发现 compass 编译出来的 css 更健壮。
对于支持 :first-child 和 :last-child 的浏览器，我们略去了两边元素对外的内边距。而对低版本浏览器，我们可以使用 .first 和 .last 这两个类名。

举个例子2：
把文字处理成图片显示出来。

h1.mokayu {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url('/images/mokayu-header.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

第一步是对默认的文字设置一个负值的缩进将其隐藏起来。然后通过 background 属性把文本转换成图片。
Compass 通过 replace-text 辅助器把这件事情变得更简单了：

h1.mokayu {
  @include replace-text('mokayu-header.png');
}

通过这两个例子，我们已经体会到了 compass 的威力了。

compass 详解

Compass 七大模块

• Reset
• Layout
• CSS3
• Helpers
• Typography
• Utilities
• Browser

Compass 核心模块

• Reset
• Layout

为什么要将这两个模块单独拿出来说呢？
因为只要引入了 compass(@compass) 就默认引入了 compass 的其他五大模块

    CSS3    Helpers    Typography    Utilities    Browser

只有这两个模块需要单独引入。
@import "compass/reset"
@import "compass/layout"

Browser 用来配置compass默认支持哪些浏览器,对于特定浏览器,默认支持到哪个版本.
Browser 中的配置一旦修改,将影响其余6个模块的输出,因为需要针对不同的浏览器做不同的适配.

reset 是 compass 内置的，如果我们想修改为 normalize。
命令行使用 gem install compass-normalize
然后在 config.rb 配置文件中添加
require 'compass-normalize'
然后在 scss 文件中 @import "normalize";

如果说 reset 模块是 compass 中使用起来最简单的模块，那么，layout 模块则是 compass 中使用率最低的模块。Layout 模块用来实现页面布局控制的。

如果说 Layout 模块是 compass 中使用率最低的模块，那么，CSS3 模块肯定是主动使用率最高的模块。
CSS3 模块主要用于提供跨浏览器的 CSS3 能力。

Typography 模块主要用来修饰文本样式、垂直韵律等(Links、Lists、Text、Vertical Rhythm)

Utilities 模块是辅助工具类函数
helpers 类里面多是函数，utilities 里面多是 mixin，包含：

Color : 颜色相关的工具集合
Print : 打印控制的集合
Tables : table样式相关的集合(table model)
Geeneral : 通用的一般类的工具(跨浏览器的清除浮动)
Sprites : 精灵图合图相关的工具集合(重点)

---

最后，给你们分享一个干货 ：

《Sass 与 Compass实战》

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后： 约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…