在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。

单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

多文件编译：

sass sass/:css/

开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且可以直接编译出来：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

@mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }

混合宏VS继承VS占位符

通过使用关键字@extend 来继承已存在的类样式块

并且编译出来的css会将选择器合并在一起，形成组合选择器

.btn {

  border: 1px solid #ccc;

  padding: 6px 10px;

  font-size: 14px;

}

.btn-primary {

  background-color: #f36;

  color: #fff;

  @extend .btn;

}

编译后

.btn, .btn-primary {

    border: 1px solid #ccc;

    padding: 6px 10px;

    font-size: 14px;

}

.btn-primary{

    backgroud-color: #f36;

    color: #fff;

}

1. 传一个不带值的参数

   @mixin border-radius($radius){

           border-radius: $radius;

           -webkit-border-radius: $radius

   }

   .main{

         @include border-radius(3px)

   }

2. 传一个带值的参数

   这个值就是默认值，当不传值的时候使用默认值，否则使用传的值

   
   

   
   

   @mixin border-radius($radius: 3px){

          border-radius: $radius;

           -webkit-border-radius: $radius

   }

   .main{

         @include border-radius()

          /*@include border-radius(5px)*/

   }

3. 传多个参数

   
   

   @mixin size($width, $height){

     width: $width;

     height: $height;

   }

   
   

   .box-center {

     @include size(500px,300px);

   }

   当参数过多时，可以使用“...”

   
   

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

用@mixin  来定义一个混合宏

用@include 来调用一个混合宏

@mixin border-radius{

    -webkit-border-radius: 3px;

    border-radius: 3px;

}

button {

    @include border-radius;

}

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译出来的 CSS：

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

•    如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
•    如果数值被圆括号包围。
•    如果数值是另一个数学表达式的一部分。

混合：代码不会合并，造成代码冗余；

继承：继承的样式会合并到一起，其他相同样式不会；

占位：会合并所有相同的样式，同时占位样式不使用不会生成样式代码；

定义：%占位符 { 样式体 }

使用：选择器 { @extend %占位符; }

占位符优点，相同样式自动合并。

[Sass]压缩输出方式 compressed

在编译的时候带上参数“ --style compressed”:

sass --watch test.scss:test.css --style compressed

[Sass]紧凑输出方式 compact

在编译的时候带上参数“ --style compact”:

sass --watch test.scss:test.css --style compact

Sass 语法格式

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

[Sass]展开输出方式 expanded

在编译的时候带上参数“ --style expanded”:

sass --watch test.scss:test.css --style expanded