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"):修改支持的浏览器最低版本.

推荐阅读更多精彩内容