1.编译sass -->css

按需编译

compass compile [项目目录]

监听文件的变化，并且自动编译

compass watch [项目目录]

2.局部文件

• 以_开头
• 不会被编译成css

3.导入文件

新建局部文件_variables.scss，用作存放变量，在宿主文件中导入的语句为：

@import "variables";

基于sass的既定规则：

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

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

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

css原生的import指令弊端：

• 一定要放在代码最前面
• 假设a引入b，浏览器会先下载a，在读到引入b的时候才会去下载b，会造成浏览器阻塞，对性能不利

4.嵌套

.main-sec {
    font-family: $main-sec-ff;

    .headline {
        font:{
            family: $main-sec-ff;
            size: 16px;
        }
    }

解析以后：

.main-sec {
    font-family: Arial, Verdana;
}

.main-sec .headline{
    font-family: Arial, Verdana;
    font-size: 16px;
}

5.继承

@extend

scss文件内容：

.error{
  color: #f00;
}

.serious-error{
  @extend .error;
  border: 1px
}

生成的css

.error, .serious-error {
  color: #f00;
}

.serious-error {
  border: 1px;
}

继承extend的原理：

就是将继承者的选择器，插入到被继承着选择器的地方

例：
scss文件

.error.instrusion{
  background-image: url("/image/hacked.png");
}

.error{
  color: #f00;
}

.serious-error{
  @extend .error;
  border: 1px
}

生成的css文件

/* line 7, ../sass/screen.scss */
.error.instrusion, .instrusion.serious-error {
  background-image: url("/image/hacked.png");
}

/* line 11, ../sass/screen.scss */
.error, .serious-error {
  color: #f00;
}

/* line 15, ../sass/screen.scss */
.serious-error {
  border: 1px;
}

extend两个知识点

• extend不能继承选择器序列
  即，以下会报错

.error .success{
 color: #f00;
}

.serious-error{
 @extend .error .success;
 border: 1px
}

• 使用%，可以构建仅用来继承的选择器（%修饰的不会被编译）

%error{
 color: #f00;
}

.serious-error{
 @extend %error;
 border: 1px
}

6.@at-root

将样式输出到样式的顶层

不加@at-root：

.main-sec{
  .main-sec-headline {
      font-size: 16px;
  };
  border: 1px;
}

/* line 8, ../sass/screen.scss */
.main-sec {
  border: 1px;
}
/* line 9, ../sass/screen.scss */
.main-sec .main-sec-headline {
  font-size: 16px;
}

加@at-root：

.main-sec{
  @at-root{
    .main-sec-headline {
        font-size: 16px;
    };
}
  border: 1px;
}

/* line 8, ../sass/screen.scss */
.main-sec {
  border: 1px;
}
/* line 9, ../sass/screen.scss */
.main-sec-headline {
  font-size: 16px;
}

css最佳实践：
浏览器解析css是从右到左来解析，即先解析main-sec-headline，再向上找父类main-sec（不加@at-root的情况）
弊端：

• 增加了样式修饰的权重
• 制造了样式位置的依赖

最佳实践的做法是

.main-sec {
 border: 1px;
}

.main-sec-headline {
 font-size: 16px;
}

7.函数

1. 跟代码块无关的函数，多是自己的内置函数，成functions
2. 可重用的代码块，称mixin

mixin通过@include来调用

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

.main-sec{
  @include col-6;
  border: 1px;
}

编译后

.main-sec {
  width: 50%;
  float: left;
  border: 1px;
}