1、compass官网:compass-style.org
compass是一个开源的书写框架
正确安装完ruby之后,使用gem install compass安装
1、compass create learn-compass-init:通过compass直接创建一个compass框架项目
2、@import “compass/reset”:compass 内置浏览器重置样式模块
2、补充部分:
@import “compass/reset”的设计思路:reset把对样式的重置封装成了一个又一个的mixin,通过@import "compass/reset/utilities"来引入这些mixin的集合,然后经过调用其中的一个global-reset的mixin来达到和reset一样的重置效果。
简单来说:
@import "compass/reset";等价于
@import "compass/reset/utilities";
@include global-reset;
详情见compass官网http://compass-style.org/reference/compass/reset/utilities/
3、指令部分:
(1)compass watch监听代码变化自动编译到CSS文件
(2)compass compile编译
(3)ompass interactive:进入console状态,调用browsers() ,可以看目前考虑的兼容哪些浏览器
(4)调用browser-versions(chrome):括号里面传浏览器名字,可以看目前支持的浏览器版本。
(5)compass compile -e production --force
compass默认是development开发模式,这里的指令是将强制覆盖掉开发模式,采用上线模式,由scss文件编译生成的css文件中不在出现调试注释。
上面的DEBUG调试语句是由于在SCSS文件中写了@debug compass-env();
(6) compass compile:进入到项目根目录下运行该命令,该命令会将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中。
(7) compass compile --force:Compass只编译发生变动的文件,如果你要重新编译未变动的文件,需要使用–force参数。
4、compass核心模块:http://compass-style.org/reference/compass/layout/
1、Reset模块:浏览器样式重置模块,用来减少不同浏览器之间的差异性。
2、Layout模块:提供页面布局的控制能力,比如,将一个容器中的子元素横向拉伸占满,纵向拉伸占满。
注意:这两个模块均需要单独引入,引入方式如上图。
3、CSS3模块:主要用来提供跨浏览器的CSS3能力。
4、Helpers模块:内含一系列函数,与sass函数列表很像,功能比较强大,不过较少用到。
5、Typography模块:主要用来修饰文本样式。
6、Utilities模块:辅助工具类模块,多是mixin
7、browser模块:用来配置compass默认支持哪些浏览器,对于特定浏览器支持到那个版本,该模块的配置一旦修改将会影响其余六个模块的输出。
4.1使用normalize替换掉compass的reset模块,
(1)在normalize官网,http://necolas.github.io/normalize.css/上Download最新版本,然后放到自己的项目目录,通过import引用
(2)使用包管理工具,npm install normalize.css
(3)使用compass的normalize的插件 使用命令行指令“gem install compass-normalize”
这里使用第三种方式:
1.在config.rb中引用插件 require 'compass-normalize'
扩展:
<1>require 'compass/import-once/activate'用来设置,在不同代码位置,重复引用时只需一次即可,避免代码冗余。实在需要重复引用时加上“!”即可,如 @import "compass/reset" xxxxxx "@import "compass/reset!"
<2>config.rb文件中output_style=“expanded or nested compact compressed”:用来设定编译成CSS后代码风格
其中使用compress压缩上线时,会去除掉里面的所有注释,那么可以在注释的最前面加上“!”,避免注释被压缩掉/*!xxxxx*/
4.2Normalize核心模块(八大模块)
1.base模块:用来统一HTML,body 标签的字体,文字大小,边距等。
2.html5模块:用来统一html中新增的元素,如article,aside等。
3.links模块:统一a标签的修饰,去掉hover和active时的边线
4.typography模块:b,strong,everyone,sub下标,sup上标等段落文本修饰
5.Embedded模块:用来统一img,svg
6.Figures:figure,pre,code等
7.Forms:button ,input,select,textarea,optgroup
8.Tables:table,td,th
5、compass的layout模块(使用率最低的一个模块)
其中包括三个小mixin,具体的看官方文本
举例如下:
scss文件:
.strech-full{
@include stretch;
}
.strech-x{
@include stretch-x;
}
编译之后:
.strech-full {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* line 69, ../sass/screen.scss */
.strech-x {
position: absolute;
left: 0;
right: 0;
}
6、compass的CSS3模块(使用率最高的一个模块)
http://compass-style.org/reference/compass/css3/
7.compass的helpers模块
Compass Selector Helpers下的的叠加选择器
append-selector($selector, $to-append)
This helper function appends any selector with some string. No space or punctuation is added when appending. The selector can be a comma-delimited list of selectors.
append-selector(".foo", ".bar")
.foo.bar
append-selector("p, div, span", ".bar")
p.bar, div.bar, span.bar
举例:
/*注意参数个数的不同及书写格式*/
#{append-selector("p,div,span",".bar")}{
color:#000;
}
#{nest("p,div,span",".bar")}{
color:#000;
}
编译出来的结果:
/*注意参数个数的不同,嵌套和叠加的空格区别及书写格式*/
/* line 106, ../sass/screen.scss */
p.bar, div.bar, span.bar {
color: #000;
}
/* line 109, ../sass/screen.scss */
p .bar, div .bar, span .bar {
color: #000;
}