CSS预选择器——Sass进阶

【1】@for循环
两种方式的for循环

@for $i from <start> through <end>
@for $i from <start> to <end>

$i 表示变量
start 表示起始值
end 表示结束值

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

@for $i from 1 to 3 {//item-3 不会被设置样式
  .item-#{$i} { width: 2em * $i; }
}

注意：
关键字 through 表示包括 end 这个数，而
关键字 to 则不包括 end 这个数。

【2】@while循环
@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

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

@each $var in <list>

【4】Sass的函数简介
主要的函数：
1、字符串函数
顾名思义就是用于处理字符串的函数
主要有两个函数：

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

注意：
（1）、如果字符串，自身带有引号会统一换成双引号 “”。
（2）、字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。
（3）、同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错。

字符串函数：

To-upper-case();
//To-upper-case():是将字符串小写字母转行为大写字母

To-lower-case()
//将字符串转换成小写字母。

2、数字函数

• percentage($ value)：将一个不带单位的数转换成百分比值；
  注意：转换的值是一个带有单位的值，那么在编译的时候会报错误信息。
• round($ value)：将数值四舍五入，转换成一个最接近的整数；
  注意：在round() 函数中可以携带单位的任何数值。
• ceil($ value)：将大于自己的小数转换成下一位整数；
  注意：ceil() 函数将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身 1 的整数。也就是只做入，不做舍的计算。
• floor($ value)：将一个数去除他的小数部分；
  注意：floor() 函数刚好与 ceil() 函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算。
• abs($ value)：返回一个数的绝对值；
• min($ numbers…)：找出几个数值之间的最小值；
  注意：在 min() 函数中同时出现两种不同类型的单位，将会报错误信息。
• max($ numbers…)：找出几个数值之间的最大值；
  注意：在 max() 函数中有不同单位，将会报错。
• random(): 获取随机数

3、列表函数

• length($list)：返回一个列表的长度值；
  注意：length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错。
• nth($list, $n)：返回一个列表中指定的某个标签值。
  在 Sass 中，nth() 函数和其他语言不同，1 是指列表中的第一个标签值，2 是指列给中的第二个标签值。

nth(10px 20px 30px,1)
10px

• join($list1, $list2,[$separator])：将两个列给连接在一起，变成一个列表；
  注意：
  1、如果直接连接两个以上的列表将会报错；
  2、在 join() 函数中还有一个很特别的参数 $separator，这个参数主要是用来给列表函数连接列表值是，使用的分隔符号，默认值为 auto。comma 和 space 两个值，其中 comma 值指定列表中的列表项值之间使用逗号（,）分隔，space 值指定列表中的列表项值之间使用空格（ ）分隔。
  在 join() 函数中除非明确指定了 $separator值，否则将会有多种情形发生：
  如果列表中的第一个列表中每个值之间使用的是逗号（,），那么 join() 函数合并的列表中每个列表项之间使用逗号,分隔；
  但当第一个列表中只有一个列表项，那么 join() 函数合并的列表项目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用的，如果第二列表项中使用是,分隔，则使用逗号分隔；如果第二列项之间使用的空格符，则使用空格分隔；
  如果当两个列表中的列表项小于1时，将会以空格分隔；

• append($list1, $val,[$separator])：将某个值放在列表的最后；
  如果没有明确的指定 $separator 参数值，其默认值是 auto。
  （1）如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。
  （2）如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔；
  （3）如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。
  （4）在 append() 函数中，可以显示的设置 $separator 参数，如果取值为 comma 将会以逗号分隔列表项；如果取值为 space 将会以空格分隔列表项

• zip($lists…)：将几个列表结合成一个多维的列表；

zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

在使用zip()函数时，每个单一的列表个数值必须是相同的：

zip(1px 2px 3px, solid , green blue red)//会报错

• index($list, $value)：返回一个值在列表中的位置值。
  index() 函数类似于索引一样，主要让你找到某个值在列表中所处的位置。在 Sass 中，第一个值就是1，第二个值就是 2，依此类推。在 index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，相反就会返回对应的值在列表中所处的位置。

4、颜色函数
（1）RGB颜色函数
R 是 red 表示红色，
G 是 green 表示绿色
B 是 blue 表示蓝色
rgb($ red,$ green,$ blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($ red,$ green,$ blue,$ alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($ color)：从一个颜色中获取其中红色值；
green($ color)：从一个颜色中获取其中绿色值；
blue($ color)：从一个颜色中获取其中蓝色值；

>> red(#f36)
255

mix($ color-1,$color-2,[$ weight])：把两种颜色混合在一起，生成另一种颜色。

mix($color-1,$color-2,$weight);

$color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。

$weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%。

（2）RGB颜色函数-RGBA()函数
rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色。

rgba($red,$green,$blue,$alpha)  //将一个rgba颜色转译出来，和未转译的值一样
rgba($color,$alpha)  //将一个Hex颜色转换成rgba颜色

Sass 的 rgba 函数，在括号是函数的参数，第一个参数是需要转换的颜色，他可以是任何颜色的表达方式，也可以是一个颜色变量；第二个参数是颜色的透明度，其值是 0~1 之间。
（3）HSL函数简介
hsl($ hue,$ saturation,$ lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
hsla($ hue,$ saturation,$ lightness,$ alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
hue($ color)：从一个颜色中获取色相（hue）值；
saturation($ color)：从一个颜色中获取饱和度（saturation）值；
lightness($ color)：从一个颜色中获取亮度（lightness）值；
adjust-hue($ color,$ degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
lighten($ color,$ amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
darken($ color,$ amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
saturate($ color,$ amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
desaturate($ color,$ amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
grayscale($ color)：将一个颜色变成灰色，相当于desaturate($ color,100%);
complement($ color)：返回一个补充色，相当于adjust-hue($ color,180deg);
invert($ color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变
5、Introspection 函数
Introspection 函数包括了几个判断型函数：
（1）、type-of($ value)：返回一个值的类型

//number 为数值型。
//string 为字符串型。
//bool 为布尔型。
//color 为颜色型
>> type-of(100px)
"number"
>> type-of("asdf")
"string"
>> type-of(asdf)
"string"
>> type-of(false)
"bool"
>> type-of(#fff)
"color"
>> type-of(blue)
"color"
>> type-of(1 / 2 = 1)
"string"

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

//unit() 函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算
>> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"
//但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外
>> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"

unit() 函数对于单位运算相对来说也没有规律，而且有些单位也无法整合成一个单位，对于我们在 CSS 中运用中并不适合，就是没有任何的意义，比如：em*px、px/em、em/rem。

unitless($ number)：判断一个值是否带有单位
只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false。

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

>> comparable(2px,1%)
false
>> comparable(2px,1em)
false
>> comparable(2rem,1em)
false
>> comparable(2px,1cm)
true

6、三元函数等
Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

if($condition,$if-true,$if-false)

【5】Sass 的 @ 规则
（1）@import
@import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：
如果文件的扩展名是 .css。
如果文件名以 http:// 开头。
如果文件名是 url()。
如果 @import 包含了任何媒体查询（media queries）。
如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。
（2）@media
Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。
（3）@extend
Sass 中的 @extend 是用来扩展选择器或占位符。
@extend 不止扩展类选择器，还可以扩展任何选择器，比如 .special.cool, a:hover, 或 a.user[href^=“http://“]
（4）@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。
（5）@debug
@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug.
（6）@warn
@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass。
与@warn、@debug一样作用的还有@error