SASS语法►安装

SASS语法--安装

安装Ruby

Mac安装Ruby
Window安装Ruby

安装Sass

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

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

安装Sass

1
2
gem install sass
sass -v

or
gem install sass —version=3.3

列出所有安装包

1
gem list

卸载Sass

1
gem uninstall sass --version=3.3

or
gem uninstall sass

编译Sass

1
sass main.scss main.css

Compass安装

1
2
3
4
5
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@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:

1
2
3
4
.webdemo-sec {
  width: 50%;
  float: left;
}

extend两个知识点

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

For example:

1
2
3
4
5
6
7
.error {
  color: #f00;
}
.serious-error {
  @extend .error;
  border: 1px solid #f00;
}

is compiled to:

1
2
3
4
5
6
.error, .serious-error {
  color: #f00;
}
.serious-error {
  border: 1px solid #f00;
}

For example:

1
2
3
4
5
6
7
%error {
  color: #f00;
}
.serious-error {
  @extend %error;
  border: 1px solid #f00;
}

is compiled to:

1
2
3
4
.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模块

1
2
3
4
@import "compass/layout";
@import "compass/grid-background";
@import "compass/sticky-footer";
@import "compass/stretching";

CSS3模块

1
2
3
4
5
@import "compass/css3";
@import "compass/support"
$supported-browsers: chrome;
$broer-minimum-versions: ("ie": "8");

链接推荐

Compass/Utilities
Sass官网
Compass官网