学习Sass
,就是学习语法,学习Compass
就是在用库的。使用compass,就是在使用compass给我们提供的库:variables,mixins,functions。
犹如JavaScript
之于jQuery
Compass介绍
compass
有以下模块:
-
Browser Support
设置对浏览器的支持情况,
$supported-browsers
列出所有你想支持的浏览器,$browser-minimum-versions
,支持浏览器的最低版本。 -
CSS3
封装了CSS3的mixin。主要子模块有:Appearance、Background Clip、Background Origin、Background Size、Border Radius、Box、Box Shadow、Box Sizing、CSS 、Regions、CSS3 Pie、Columns、Filter、Flexbox、Font Face、Hyphenation、Images
、Inline Block、Opacity、Selection、Shared Utilities、Text Shadow、Transform
、Transition、User Interface
-
Helpers
函数库 -
Layout
布局相关的 -
Reset
样式重置
@import "compass/reset";
这样所有的样式都被重置了,等价引用
@import "compass/reset/utilities";
global-reset();
作为一个有极客精神的人,如果不想重置所有样式,按需重置,怎么处理?
通过mixin函数就可以做到。
@import "compass/reset/utilities";
nested-reset();
reset-box-model();
reset-table();
reset-html5();
...
- Typography
文本布局相关,Links
链接样式;Lists
列表样式;Text
文字显示;
Vertical Rhythm
设置行高; - Utilities
其他mixin
Compass插件normalize使用
1 . 安装插件
gem install compass-normalize
2 . 使用插件
- 在
config.rb
添加引用
require 'compass-normailze'
- css文件调用
a. 重置所有样式
@import "normalize"; //重置所有样式
b. 按需重置
@import "normalize-version";
@import "normalize/base";
@import "normalize/html5";
@import "normalize/links";
参照网站:
http://xhope.top/?p=893
http://compass-style.org/reference/compass/