// Sass是一款强化css 的辅助工具， 它在css语法基础上增加了 变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能
// 语法格式:  1. SCSS这种格式以 .scss 作为拓展;  2.  Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass",它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，这种格式以 .sass 作为拓展名,任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式：

// 6.2 变量 $ (Variables: $)
$width: 5em;

#main {
  width: $width;
}

#main {
  $width:  5em !global;
  width: $width;
}

#silder {
  width: $width;
}

// 6.7 插值语句 #{}
// 通过 #{}插值语句可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color:blue;
}
// #{}插值语句也可以在属性值中插入SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用#{}可以避免Sass运行运算表达式，直接编译CSS
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}



// 7. @-Rules 与指令 （@-Rules and Directives）
// 7.1 @import "foo.scss";  or  @import "foo";

// 7.1.2 嵌套css @import 
.example {
  color: red;
}

#main {
  @import "example";
}

// 7.2 @media 媒体查询
.slidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

// @media 的queries 允许互相嵌套使用，编译时，Sass自动添加 and
@media screen {
  .slidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

// @media 甚至可以使用SassScript (比如变量，函数，以及运算符)代替条件的名称或者值:
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .slidebar {
    width: 500px;
  }
}

// 编译后
@media screen and (-webkit-min-device-pixel-ratio:1.5){
  .slidebar {
    width: 500px;
  }
}

// 7.3 @extend 继承
.error {
  border:  1px #f00;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

// 7.3.1 How it Works
// @extend 的作用是将重复使用的样式（.error）延伸（extend）给需要包含这个样式的特殊样式（.seriousError）

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 7.3.2 延伸复杂的选择器
// class选择器并不是唯一可以被延伸（extend）的，sass允许延伸任何定义给单个元素的选择器，比如.special.cool, a:hover或者a.user[href^="http://"]

.hoverlink {
  @extend a:hover;
}

// 同class元素一样，a:hover的样式将继承给.hoverlink
.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}


.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

// 7.3.3 多重延伸
.error {
  border: 1px #f00;
  background-color: #fdd;
}

.attention {
  font-size: 3em;
  background-color: #f00;
}

.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

// 7.3.4 继续延伸 (当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个)
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

// 7.3.8 在指令中延伸（@extend in Directives）
// 顾名思义：如果在@media中使用@extend,必须延伸给相同指令层中的选择器

// 下面的例子是可行的
@media print {
  .error {
    border: 1px #f00;
    background-color: red($color: #000000);
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

// 但不可以这样:
.error {
  border: 1px #f00;
  background-color: #fdd;
}
@media print {
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}


// 8.控制指令 (提供一些基础的控制指令，比如在满足一一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令（mixin）配合使用，尤其是用在Compass等样式库中)

// 8.1 if()

// 8.2 @if  当 @if的表达式返回值不是false或者null时，条件成立，输出{}内的代码：
p {
  @if 1 + 1 == 2 {border: 1px solid;}
  @if 5 < 3 {border: 2px dotted;}
  @if null {border: 3px double;}
}

// @if声明后面可以跟多个@else if 声明，或者一个@else 声明。如果@if声明失败，Sass将逐步执行@else if 声明，如果全部失败，最后执行@else

$type: monster;
p {
  @if $type == ocean { color: blue;}
  @else if $type == matador { color: red;}
  @else if $type == monster { color: green;}
  @else {color: black;}
}

// 编译为  p { color: green; }

// 8.3 @for
// @for指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
// 这个指令包含两种格式：
// 1. @for $var form <start> through <end>, 或者 @for $var from <start> to <end>, 区别在于 through 与 to 的含义：当使用 through 时，条件范围包含<start>与<end>时，条件范围包含<start>与<end>的值，而使用to时条件范围只包含<start>的值不包含<end>的值。另外，$var可以是任何变量，比如 $i;<start>和<end>必须是整数值。

@for $i from 1 through 10 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

// 8.4 @each
// @each 指令的格式是 $var in <list>, $var 可以是任何变量名,比如 $length 或者 $name， 而 <list> 是一连串的值，也就是值列表

// @each 将变量$var 作用于值列表中的每一个项目，然后输出结果:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url("/image/#{$animal}.png");
  }
}

    // 8.4.1 多重赋值 Multiple Assignment
    @each $animal, $color, $cursor in (puma, black, default),
                                      (sea-slug, blue, pointer),
                                      (egret, white, move) {
      .#{$animal}-icon {
        background-image: url("/images/#{$animal}.png");
        border: 2px solid $color;
        cursor: $cursor;
      }
    }

// 8.5 @while 
// @while 指令重复输出格式直到表达式返回结果为false， 这样可以实现比@for更复杂的循环，只是很少会用到:

$i:6;
@while $i > 0 {
  .item-#{$i} {width: 2em * $i;}
  $i:$i - 2;
}

// 9.混合指令(Mixin Directives)
// 混合指令(Mixin)勇于定义可重复使用的样式，避免了使用无语意的class，比如 .float-left。混合指令可以包含所有的css规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。

// 9.1 定义混合指令 @mixin （Defining a Mixin: @mixin）
// 混合指令的用法在 @mixin后添加名称与样式，比如名为 large-text的混合通过下面的代码定义
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  };
  color: #ff0000;
}

// 混合也需要包含选择器和属性，甚至可以用 & 引用父选择器
@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & {height: 1px;}
}

// 9.2 引用混合样式 @include 
// 使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数(可选):

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

// 也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器
@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

// 混合样式中也可以包含其他混合样式，比如：
@mixin compound {
  @include highlighted-backgroud;
  @include header-text;
}

@mixin highlighted-backgroud { background-color: #fc0;}
@mixin header-text {font-size: 20px;}
// 混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置

// 9.3 参数
// 参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

@mixin sexy-border ($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, lin)}

// 混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值：
@mixin sexy-border ($color, $width: lin) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue);}
h1 { @include sexy-border(blue, 2in);}

// 9.4 向混合样式中导入内容
// 在引入混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

// 为便于书写，@mixin可以用 = 表示， 而@include 可以用 + 表示， 所以上面的例子可以写成：
=apply-to-ie6-only {
  * html 
    @centent
}

+apply-to-ie6-only 
  #logo
    background-image: url(/logo.gif)


// 10.函数指令 
// Sass支持自定义函数,并能在任何属性值或Sass Script使用
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5);}

// 编译为
#sidebar {
  width: 240px;
}