Compass模块使用

学习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/