安装Ruby

Mac安装Ruby
Window安装Ruby

安装Sass

修改Ruby镜像 -> 淘宝Ruby镜像

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

安装Sass

gem install sass
sass -v

or
gem install sass —version=3.3

列出所有安装包

gem list

卸载Sass

gem uninstall sass --version=3.3

or
gem uninstall sass

编译Sass

sass main.scss main.css

Compass安装

gem install compass

compass -v

compass create learn-compass-init

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

1.当@import后边跟的文件名是以.css结尾的时候
2.当@import后边跟的是http://开头的字符串的时候
3.当@import后边跟的是一个url()函数的时候
4.当@import后边带有media queries的时候

基于sass的既定规则

1.没有文件后缀名的时候.sass会添加.scss或者.sass的后缀；
2.同一目录下，局部文件和非局部文件不能重名。

变量操作

1.直接操作变量，即变量表达式。
2.通过函数
跟代码块无关的函数，多是自己内置函数@Function
可重用的代码块，称mixin
@include方式调用
@extend的方式调用

hsl

For example:

@mixin col-6 {
  width: 50%;
  float: left;
}

.webdemo-sec {
  @include col-6;
}

@mixin col-6($width) {
  width: $width;
  float: left;
}

.webdemo-sec {
  @include col-6(50%);
}

@mixin col-6($width: 50) {
  width: $width;
  float: left;
}

.webdemo-sec {
  @include col-6();
}

is compiled to:

.webdemo-sec {
  width: 50%;
  float: left;
}

extend两个知识点

1.extend不可以继承选择器序列
2.使用%，用来构建不用来继承的选择器。

For example:

.error {
  color: #f00;
}
.serious-error {
  @extend .error;
  border: 1px solid #f00;
}

is compiled to:

.error, .serious-error {
  color: #f00;
}
.serious-error {
  border: 1px solid #f00;
}

For example:

%error {
  color: #f00;
}
.serious-error {
  @extend %error;
  border: 1px solid #f00;
}

is compiled to:

.serious-error {
  color: #f00;
  border: 1px solid #f00;
}

Compass核心模块

CSS3
Helpers
Typography
Utilities
@import “compass”;
Reset
@import “compass/reset”;
Layout
@import “compass/layout”;

Normalize核心模块
base
html5
links
typegraphy
embeds
groups
forms
tables
@import “normalize”;
or
@import “normalize/version”;
@import “normalize/base”;
@import “normailze/html5”;

Layout模块

@import "compass/layout";
@import "compass/grid-background";
@import "compass/sticky-footer";
@import "compass/stretching";

CSS3模块

@import "compass/css3";
@import "compass/support"

$supported-browsers: chrome;
$broer-minimum-versions: ("ie": "8");

Compass/Utilities

Sass官网

Compass官网