SOURCE

@charset "UTF-8";
//Scss 变量、 嵌套、导入、注释、混合器、选择器继承

/*
Sass数据类型：
 数字: 如，12、 1.3、 10px、 1em；（数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型）
 字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
 布尔型：如，true、 false；
 空值：如，null；
 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif；
 Maps
*/

//List类型取值
/*List类型的取值,语法nth(list, index),第一个参数表示要取谁的,也就是list类型的变量的名称,
第二个表示索引,这里的索引和JavaScript略有不同,JavaScript索引基本上都是从零开始,而这里是从一开始的。
可以在列表中存储多种类型的值。*/
$value: #000 5px 10px 15px 20px 1;
.element {
  border: {
    style: solid;
    color: nth($value,1);
    width: auto;
  }
  border-radius: nth($value,3);
  margin: nth($value,2) nth($value,3);
  padding: nth($value,3) nth($value,5);
  line-height: nth($value,6);
}



//Maps
/*Sass中的Map其实就是类似于关联数组，常常以key/value对键值出现。Map必须用括号()括起来，
每对键值之间使用逗号分隔。在Map中，一个给定的key只能有一个相关的value，但一个给定的value可以被映射到许多不同的key上。
另外，在Map中映射给key的值value可以是任何数据类型，包括Map。*/
$map: (
  "font-family": "Comic Sans MS',Arial,'Microsoft Yahei",
  "font-size": 12px,
  "color": #000,
  "background-color": black
);
h1 {
  font-family: map-get($map,"font-family");
  font-size: map-get($map,"font-size");
}



//嵌套（选择器嵌套、属性嵌套）
.aboutSection {
  padding: 5px;
  border: {
    style: solid;
    color: #000;
    width: 1px;
  }
  &-abc {
    display: block;
  }
  &_abc {
    display: inline;
  }
  &:hover {
    color: #ff0000;
  }
  &:before {
    content: "Sass嵌套";
  }
  article {
    h1 {
      color: #333;
    }
    > p {
      margin-bottom: 1.4em;
    }
  }
}



//变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。
//将局部变量转换为全局变量可以添加 !global 声明。
$width: 10em;
#main {
  $height: 5em !global;
  width: $width;
  height: $height;
}
#sidebar {
  height: $height;
}



@mixin font {
  font-family: "宋体";
  font-size: 14px;
  color: #333;
  a {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
  }
  &:hover {
    color: #007aff;
  }
}
nav {
  display: block;
  @include font;
}

@mixin test {
  p {
    color: #f00;
  }
}
@include test;

@mixin linkColor($normal,$hover,$active) {
  color: $normal;
  &:hover { color: $hover; }
  &:active { color: $active; }
}
a{
  @include linkColor(red,green,blue);
}
input {
  //sass允许通过关键词参数（语法$name: value）的形式指定每个参数的值。
  //这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：
  @include linkColor(
    $hover: #0f0,
    $normal: #f00,
    $active: #00f
  );
}

// 混合器参数使用默认值
@mixin borderRadius(
  $borderTopLeft: 10px,
  $borderTopRight: $borderTopLeft,
  $borderBottomLeft: $borderTopLeft,
  $borderBottomRight: $borderTopLeft
){
  border-top-left-radius: $borderTopLeft;
  border-top-right-radius: $borderTopRight;
  border-bottom-left-radius: $borderBottomLeft;
  border-bottom-right-radius: $borderBottomRight;
}

button{ @include borderRadius; }
button{ @include borderRadius(2px); }
button{ @include borderRadius(null); }
button{ @include borderRadius(2px,5px,null); }
button{ @include borderRadius(2px,5px); }
button{ @include borderRadius(2px,$borderBottomRight: 0); }
/*位置参数必须出现在关键字参数之前，下面这种写法是错误的
button{ @include borderRadius($borderBottomRight: 0,2px); }*/
button{ @include borderRadius($borderBottomRight: 0); }
button{ @include borderRadius($borderBottomRight: null); }
button{ @include borderRadius(null,$borderBottomRight: 10px); }
button{ @include borderRadius($borderTopRight: 0,$borderBottomLeft: 0); }

@mixin borderRadius2(
  $borderTopLeft: 1px,
  $borderTopRight: 2px,
  $borderBottomLeft: 3px,
  $borderBottomRight: 5px
){
  border-top-left-radius: $borderTopLeft;
  border-top-right-radius: $borderTopRight;
  border-bottom-left-radius: $borderBottomLeft;
  border-bottom-right-radius: $borderBottomRight;
}

//使用混合器默认值
div{ @include borderRadius2; }
//传入第一个、第二个参数给混合器，其余的使用默认值
div{ @include borderRadius2(0,5px); }
//传入具体参数给混合器，其余的使用默认值
div{ @include borderRadius2($borderBottomRight: 4px); }
div{ @include borderRadius2($borderTopRight: 0,$borderBottomRight: 0); }



//向混合器中导入内容 @content
/*
@content只能在mixin中使用，当定义一个mixin后，并且设置了@content；
@include的时候可以传入相应的内容到mixin里面。
*/
$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors(red) { color: $color; }
}
.colors {
  @include colors;
}



//选择器继承
aside {
  font-size: 20px;
  @extend .error;
}
.error {
  border: 1px solid #000;
  background-color: #f1f1f1;
}
.error p {
  display: block;
  text-align: center;
}
p .error {
  border-color: yellow;
  text-decoration: underline;
}
.parent.error {
  border-color: yellow;
  text-decoration: underline;
}
nav.error {
  border-color: yellow;
  text-decoration: underline;
}
/*
继承只会在生成css时复制选择器，而不会复制大段的css属性。
被继承的样式会保持原有定义位置和选择器权重不变。
跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。
*/



//变量、混合器的命名甚至sass的文件名，可以互换通用_和-。
$a_bc: 12px;
a{
  font-size: $a-bc;
}
@mixin _abc {
  a { background-color: #eee; }
}
@include -abc;



//导入SASS文件 @import
/*sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。
另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。
使用sass的@import规则并不需要指明被导入文件的全名。可以省略.sass或.scss文件后缀。
有些sass文件用于导入，你并不希望为每个这样的文件单独地生成一个css文件（那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件）。
对此，sass用一个特殊的约定来解决。此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。
当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。*/



//占位符选择器 %placeholder
/*占位符选择器编译出来的CSS样式，会把相同的样式合并在一起*/
%btn {
  padding: 5px 10px;
  font-size: 12px;
  color: #333;
  background-color: #e6e6e6;
  border-radius: 3px;
  border: 1px solid #adadad;
}
.confirm-btn {
  /*确认按钮*/
  @extend %btn; 
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}
.error-btn {
   /*错误按钮*/
  @extend %btn;
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}



//插值语句 (interpolation) 也可写进多行注释中输出变量值：
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
$sideBarWidth: 200px;
#main {
  /*
    width: calc(100% - $sideBarWidth);
    calc() 是一个CSS函数，不是一个Sass函数。这就是说Sass会将整个表达式解释成一个字符串。
    你可以试试：$type-of-expression: type-of(calc(100% - $sidebar-width)); // string
  */
  width: calc(100% - #{$sideBarWidth});
}
@mixin selector($selector:left,$attribute:margin)
{
  //通过 #{} 插值语句可以在选择器或属性名中使用变量
  .main-#{$selector} {
    max-width: 100%;
    min-height: 100%;
    #{$attribute}-left: auto;
    #{$attribute}-right: auto;
  }
  //在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
  .main-#{$selector}:after {
    content: "#{5+10}";
  }
}
@include selector(right);



//运算
#test {
  padding: 10px-5px;
  /*“/”在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了“/”除法运算的功能。*/
  /*
    以下三种情况“/”将被视为除法运算符号：
      如果值，或值的一部分，是变量或者函数的返回值
      如果值被圆括号包裹
      如果值是算数表达式的一部分
  */
  font: 10px/8px;       //不会运算，原样输出。
  $value: 100px;
  width: $value/2;      //值或值的一部分是变量
  width: round(1.5)/2; //值或值的一部分是函数的返回值
  height: (20px/2);     //值被圆括号包裹
  margin-left: 100px + 8px/2px;  //值是算数表达式的一部分
  $size: 18px;
  line-height: $size/1px; //18 number
}
#test:after {
  /*Sass中不能使用null来连接其他字符串，你要是使用text + null，在编译Sass的时候将会报错*/
  /*content: "abc"+null;*/
}



//颜色值运算
p {
  //颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值
  color: #010203*0; //输出black
  background-color: #333 + #666;  //输出#999999
  //如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}



//媒体查询 @media
/*Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。
如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。*/
body {
  @media screen and (orientation: landspace){
    background-color: #fff;
    * {
      color: #fff;
    }
  }
}
//@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature:$value) {
  .sidebar {
    width: 500px;
  }
}


//自定义函数
/*Sass允许用户自定义函数*/
@function run($a,$b) {
  @return $a*$b+px
}
.run {
  font-size: run(2,10);
}



//@if
/*当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码;
@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，
Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明。*/
p {
  @if 1 + 1 == 2 { border: 1px solid #eee; }
  @if not (5 > 3) { border: 2px dotted #333; }  //not 操作符等价于 !
  @if null  { border: 3px double #666; }
}
$type: inline-block;
p {
  @if $type == block {
    display: block;
  } @else if $type == inline {
    display: inline;
  } @else if $type == inline-block {
    display: inline-block;
  } @else {
    display: none;
  }
}



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



//@each
/*@each 指令的格式：@each $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，
而 <list> 是一连串的值，也就是值列表。
@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果。*/
@each $fontSize in 12px, 14px, 16px {
  .fz-#{$fontSize} {
    font-size: $fontSize;
  }
}



//@while
/*@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环。*/
$i: 6;
@while $i <= 8 {
  .item-#{$i*2} { width: 2px * $i; }
  $i: $i + 1;
}



//Sass 提供了四种输出格式：
/*Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。
选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。
当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。
Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。
Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，
不嵌套的选择器会输出空白行作为分隔符。
Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，
比如会自动替换占用空间最小的颜色表达方式。*/



/*
混合器 VS 继承 VS 占位符选择器

  混合器缺点：不会自动合并相同的样式代码，如果在样式文件中多处调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。
  混合器优点：可以传参数。
  提示：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
  
  继承缺点：不能传变量参数。
  提示：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
  
  占位符选择器是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，
  不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。
*/



//https://sass.hk/guide/
//https://sass.hk/docs/
//http://blog.csdn.net/soindy/article/details/68068054
//http://www.cnblogs.com/owenyang/p/4014719.html
//https://segmentfault.com/a/1190000003742313