Sass&&Compass

实时编译：Sass-Build-SublimeText:安装后使用快捷键Ctrl+B打开

compass:可在命令行中，项目目录下使用compass watch实时监听，这样还可以实时@debug xxx（eg.@debug brightness(#000);@debug browsers();）compass compile --force实时编译

Compass：

1.切换到工作路径下，compass create xxx//项目名，创建compass项目

2.在koala中编译时，需要导入整个项目，否则会出错。

sass中使用css原生@import的既定规则：

1.当@import后边跟的文件名是以.css结尾的时候！

2.当@import后边跟的是http://开头的字符串的时候！

3.当@import后边跟的是一个url()函数的时候。

4.当@import后边带有media queries的时候。

基于sass的既定规则：

1.没有文件后缀名的时候，sass会添加.scss或者.sass的后缀。

2.同一目录下，局部文件和非局部文件不能重名。

sass中变量操作：

1.直接操作变量，即变量表达式。

2.通过函数。{①跟代码块无关的函数，多是自己内置函数，称functions；②可重用的代码块，称mixin（①@include的方式调用；②extend的方式调用）}

sass中的数值计算时带单位的。

sass中的color支持HSL色彩表示法(色相，饱和度，亮度：Hue,Saturation，Lightness)

sass中的@media跟CSS区别：

sass中的media query可以内嵌在css规则中，在生成CSS的时候，media query才会被提到样式的最高层级。好处：避免了重复书写选择器或者打乱样式表的流程。

样式表嵌套的缺点：样式渲染低效，增加了样式修饰的权重，制造了这种样式位置的依赖。

sass中@at-root：明确指定被嵌套的内容输出在样式表的底层，虽然嵌套书写，但最后在.css文件中生成时却不包含嵌套

sass中@if：条件判断

---

Compass核心模块:Reset(浏览器样式重置模块，用来减少不同浏览器之间的差异性，更推荐Normalize)；Layout（提高页面布局的控制能力）

这两种模块必须单独引入：@import "compass/reset"    @import "compass/layout"

而@import"compass" 就默认包含了其它4个模块：

CSS3:主要用来提高跨浏览器的CSS3能力

Helpers：内含一系列函数，比较少用，但功能丰富强大

Typography：主要用来修饰文本样式，垂直韵律

Utilities：没有办法放到其他的模块都可以放到这个模块，顾名思义辅助模块，都是mixin.

还有一个模块就是：Browser support模块（用来配置Compass默认支持哪些浏览器，一旦修改将影响其余6个模块的输出）

如何用normalize替换掉reset？

1.在normalize官网上将文件下载下来，放到项目目录，通过import将文件引入进来。

2.命令行安装：gem install compass-normalize,安装成功后，在config.rb中引入插件:require 'compass-normalize'，并在.scss文件中@import "normalize".

normalize包含8个模块:base:统一html和body标签的字体，文字大小的调整，边距等等；html5:统一html5里面新增的元素;links：统一a标签的样式修饰;typography：统一D，strong,h1,sub,sup等段落文本的修饰;embeds:统一img,svg等标签的样式修饰;groups:统一pre等标签的样式修饰；forms:统一form相关的button,input,textarea等标签的样式修饰；tables:统一table相关的table,td,th等标签的样式修饰.引用方式：首先引用@import "normalize-version",再引用@import "normalize/base"等.

reset一共包含12个mixin：Compass Reset Utilities

compass中config.rb首行: require 'compass/import-once/activate'的作用：即使在.scss中重复引用@import，.css文件也只会编译第一次。如果确定要多次引用，可在@import后加！.

在config.rb第6行可修改相对路径：将第16行的“relative_assets = true”打开

compass中config.rb第12行output_style可选择编译后文件格式，当我们选择compressed压缩格式时，默认不保存注释,可通过"/*!......*/"添加!来保留 注释

Compass中封装了几乎所有css3的新属性，我们只需要调用css3的同名mixin即可.首先引入@import "compass/css3"模块，然后再需要的地方@include xxx;

Compass中有个Browser Support功能，可以查看支持的浏览器和浏览器版本，首先@import "compass/support",然后命令行项目目录下输入命令compass interactive——>回车——>browser()——>browser-versions(chrome).

通过$supported-browsers:chrome，firefox；来修改支持的浏览器。注意这个修改会影响到其它所有模块，也会影响css3中封装好的前缀，这样可以调整只支持某种浏览器的需求.

$browser-minimum-versions:("ie":"8"):修改支持的浏览器最低版本.