// 编译出来的CSS中不显示

/**/ 编译出来的CSS中显示

插值#{}

让 变量和属性 工作的很完美

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

编译后

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

编译后

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

局限性：

1、调用变量的插值无效；

2、调用混合宏的插值无效；

混合宏 VS 继承 VS 占位符

%placeholder 占位符，是个好东西，而且很强大

只有通过 @extend 调用的占位符，才会编译后生成CSS代码，而且编译出来的代码会将相同的代码合并在一起。

没有通过@extend调用的占位符，不会产生任何代码。

Sass的继承，通过关键词“@extend”来继承类中的样式代码块

Sass混合宏的不足：

会生成冗余的代码块，并不能智能的将相同的样式代码块合并在一起

第一种是@mixin size($width,$height)，调用时传参的是@include size(500px,300px);

第二种是@mixin size($width...)，调用传参的方法有@include size(500px 300px)和@include size(500px,300px)，表示一个参数里有多个值，这里编译之后的表现形式是width:500px 300px和width:500px,300px。

如果是使用@include size(500px,300px)调用给同一个参数的话，是必须使用@mixin size($width...)这样的形式，不然会编译错误，而@include size(500px 300px)则不用加省略号，用@mixin size($width)也能正确编译。

@include 调用混合宏

button { @include border-radius;}

如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义

不带参数混合宏：

@mixin border-radius{
    border-radius: 5px;
}

@mixin 是声明混合宏的关键词，border-radius是混合宏的名称，大括号里面的是复用的样式代码。

带参数混合宏：

@mixin border-radius($radius){
  border-radius: $radius;
}

带参数混合宏：参数设置默认值

@mixin border-radius($radius:5px){
  border-radius: $radius;
}

带参数混合宏：复杂的混合宏

@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);
  }
}

$shadow... 表示可以有一个或有多个阴影值，重点看大括号内（@if...@else）逻辑关系

属性嵌套，主要是有前缀的属性，如：border,margin,padding,font等属性

Sass 的嵌套分为三种：

• 选择器嵌套    （这个一定要慎重使用，过度使用会混淆择器路径，代码难以阅读）

• 属性嵌套

• 伪类嵌套

只有满足所有下述标准时方可创建新变量：

1. 该值至少重复出现了两次；

2. 该值至少可能会被更新一次；

3. 该值所有的表现都与变量有关（非巧合）。

基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量 之前 重新声明下变量即可。

默认变量的价值在进行 组件化开发 的时候会非常有用。

声明变量的符号：$

1. 嵌套输出方式 nested        （结束的大括号不独立一行）

2. 展开输出方式 expanded   （结束的大括号独立一行）  

3. 紧凑输出方式 compact     （单行 CSS 样式格式） 

4. 压缩输出方式 compressed（所有代码在一行）