sass进阶版学习摘要

@if

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。
假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示：

//SCSS
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

@for

在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。

@for $i from  through 
@for $i from  to 
@for $i from 1 through 5{
    .m-width-#{$i} {
        width: 100px*$i;
    }
}
// 生成的代码
.m-width-1{
  width: 100px
}
.m-width-2{
  width: 200px
}
一直到5

$i 表示变量
start 表示起始值
end 表示结束值
这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

@while

@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行

//SCSS
$types: 5;  变量
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1; // 减1 防止进入死循环
}

@each

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。

@each 循环指令的形式：

@each $var in

@sass 函数

在 Sass 中除了可以定义变量，具有 @extend、%placeholder 和 mixins 等特性之外，还自备了一系列的函数功能。其主要包括：

字符串函数

  unquote($string)：删除字符串中的引号；
  quote($string)：给字符串添加引号

数字函数

  percentage()函数主要是将一个不带单位的数字转换成百分比形式： 不能带有单位否则报错
  round() 函数可以将一个数四舍五入为一个最接近的整数
  ceil() 函数将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身 1 的整数。也就是只做入，不做舍的计算
  floor() 函数刚好与 ceil() 函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算
  abs( ) 函数会返回一个数的绝对值。
  min() 函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数 min(1,2,3) :如果带单位要保证单位统一
  max() 获取最大值
  random() 函数是用来获取一个随机数：

列表函数

  length($list)：返回一个列表的长度值；
  nth($list, $n)：返回一个列表中指定的某个标签值 nth(10px 20px 30px,1)  //10px
  join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表； [$separator] 指定链接的字符  join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错：
  append($list1, $val, [$separator])：将某个值放在列表的最后；
  如果没有明确的指定 $separator 参数值，其默认值是 auto。  comma  space
    如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。
    如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔；
    如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。

       >> append((blue green),red,comma)
       (#0000ff, #008000, #ff0000)
       >> append((blue green),red,space)
       (#0000ff #008000 #ff0000)

  zip($lists…)：将几个列表结合成一个多维的列表；
  index($list, $value)：返回一个值在列表中的位置值。
      >> index(1px solid red, red)  //3

Introspection 函数

type-of($value)：返回一个值的类型

number 为数值型。type-of(100)
string 为字符串型。type-of(aaaf)
bool 为布尔型。 type-of(true) 
color 为颜色型。type-of(red)

unit($number)：返回一个值的单位

unit(100px)  //px 

unitless($number)：判断一个值是否带有单位

unitless() 函数相对来说简单明了些，只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false

comparable(number-2)：判断两个值是否可以做加、减和合并

comparable() 函数主要是用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false：

Miscellaneous 函数

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：if(true,1px,2px) 1px

map函数

Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据
map 的嵌套实用性也非常的强，大家可能有碰到过换皮肤的项目，可能每一套皮肤对应的颜色蛮多的，那么使用此功能来管理颜色的变量就非常的有条理性，便于维护与管理。你可以这样使用
$theme-color: (
default: (
    bgcolor: #fff,
    text-color: #444,
    link-color: #39f
),
primary:(
    bgcolor: #000,
    text-color:#fff,
    link-color: #93f
),
negative: (
    bgcolor: #f36,
    text-color: #fefefe,
    link-color: #d4e
)
);

map-get(key)：根据给定的 key 值，返回 map 中相关的值。如果key值不存在就不会编译样式也不会报错

$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
.home-text{
    color: map-get($social-colors,facebook);       
}

map-has-key(key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。

  map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key，则函数返回 true，否则返回 false。前面的示例，
当 $key 不在 $map 中时，使用 map-get($map,$key) 函数将返回一个 null 值。但对于开发人员，
 并看不到任何提示信息。如果使用 map-has-key($map,$key) 函数就可以改变这一状态。我们来看一个简单的示例。

@if map-has-key($social-colors,facebook){
    .btn-facebook {
      color: map-get($social-colors,facebook);
  }
  } @else {
      @warn "No color found for faceboo in $social-colors map. Property ommitted."
  }

map-merge(map2)：将两个 map 合并成一个新的 map。

map-remove(key)：从 map 中删除一个 key，返回一个新 map。

map-keys($map)：返回 map 中所有的 key。

map-values($map)：返回 map 中所有的 value。

map-values($map) 函数类似于 map-keys($map) 功能，不同的是 map-values($map )获取的是 $map 的所有 value 值，
可以说也将是一个列表。而 且，map-values($map) 中如果有相同的 value 也将会全部获取出来。

keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value

颜色函数

rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值
rgba(200, 40, 88, 0.65)
mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色
rgba(200, 40, 80, 0.65105)

Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。其使用语法如下：
mix(color-2,color-1 和 weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%

在 RGB 颜色函数中，在实际中常用的主要是 rgba() 和 mix() 两个函数，而 rgb() 函数只能快速的将一个 rgb 颜色转换成十六进制颜色表达，red()、green() 和 blue() 函数，只能取得某一颜色的一个值

三元函数等

当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数

@规则

@import

根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：

如果文件的扩展名是 .css。
如果文件名以 http:// 开头。
如果文件名是 url()。
如果 @import 包含了任何媒体查询（media queries）。
如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。

@media

Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。来看一个简单示例：

.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
编译出来：

.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }

Sass 中的 @extend 是用来扩展选择器或占位符。比如：

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

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

.seriousError {
border-width: 3px; }

@at-root

从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。来看一个简单的示例：

.c {
    color: yellow;
  @at-root .d {
    color: green;
  }
}
 // 生成
c {
color: yellow;
}
.d {
color: green;
}

@debug

在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:

@warn

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

@error

@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要将#{$x}值设置在10以内的数";
  }

}

.test {
  @include error(15);
}