【WEB】Sass与Compass安装与入门(二)

具体的安装详见Sass与Compass安装与入门（一）
http://blog.csdn.net/whuzxq/article/details/70045199

一.Compass核心模块概述

1.Reset:浏览器样式重置模块，用来减少不同浏览器之间的差异性。

@import “compass/reset”

2.Layout:提供页面布局的控制能力。

@import “compass/layout”

3.CSS3:提供跨浏览器的CSS3能力。
4.Helpers：函数，较少用。
5.Typography：修饰文本样式
6.Utilities：辅助工具类的工具，多是mixin

3-6 @import “compass”

7.Broswer:针对不同的浏览器做适配。

二. Normalize

1.替换reset为compass
在Sass与Compass安装与入门（一）中提到过compass自带的reset库是将所有的系统自带样式清除，这样做存在一定的弊端，因此替换为normalize.css库使用。具体的替换方式为：

gem install compass-normalize

并进行如下配置：

在screen.scss中

@import "normalize";

注：1.output_style

output_style = :expanded or :nested or :compact or :compressed
若是：compressed,则生成的代码是压缩过的，如果有需要保留的注释，则将注释写成/*！/则不会被压缩掉。
2.每次修改完config后,重新运行compass watch

2.Normalize核心模块
(1)base:统一html和body的字体，文字大小的间距的调整
(2)html5：统一html中新增的元素
(3)links：统一a标签的样式修饰，去掉hover和active的边线
(4)typography：统一strong,b,h1等断落文本的样式修饰。
(5)embeds:统一image,svg等样式修饰
(6)groups:figure等标签的样式修饰
(7)forms:统一form相关的button，input等样式修饰
(8)tables:统一table相关的标签样式。

例如：

@import "normalize-version";
/*分割线1*/
@import "normalize/base";
/*分割线2*/
@import "normalize/html5";
/*分割线3*/
@import "normalize/links";

生成的screen.css文件如下：

*分割线1*/
/*! normalize.css v3.0.0 | Base | MIT License | git.io/normalize */
/* line 11, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-normalize-1.5/stylesheets/normalize/_base.scss */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* line 19, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-normalize-1.5/stylesheets/normalize/_base.scss */
body {
  margin: 0;
}

/*分割线2*/
/*! normalize.css v3.0.0 | HTML5 Display Definitions | MIT License | git.io/normalize */
/* line 9, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-normalize-1.5/stylesheets/normalize/_html5.scss */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/* line 29, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-normalize-1.5/stylesheets/normalize/_html5.scss */
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

/* line 40, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-normalize-1.5/stylesheets/normalize/_html5.scss */
audio:not([controls]) {
  display: none;
  height: 0;
}

/* line 47, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-normalize-1.5/stylesheets/normalize/_html5.scss */
[hidden],
template {
  display: none;
}

/*分割线3*/
/*! normalize.css v3.0.0 | Links | MIT License | git.io/normalize */
/* line 9, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-normalize-1.5/stylesheets/normalize/_links.scss */
a {
  background: transparent;
}

/* line 15, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-normalize-1.5/stylesheets/normalize/_links.scss */
a:active,
a:hover {
  outline: 0;
}