关于SASS的一些碎碎念

@extend 与 @mixin 的区别

1. @extend 命令不够灵活，不能传递参数。

@extend 只能传递代码片断，而@mixin 则可以传递参数。

如果只是这点区别的话，那可能有人就会想，我都用@mixin不就好了么。莫方，来看第二条。

2. 编译结果不一样。

@extend 和 @mixin 都可以让我们利用样式片段，那它俩的区别主要是，使用 @extend 可以产生 DRY（Donot repeat youself）风格的代码。

例如：

%part{
  position: absolute;
  border-radius: 50%;
}

.box1{
  width: 30px;
  height: 30px;
  background: #ccc;
  @extend %part;
}
.box2{
  width: 10px;
  height: 10px;
  background: #000;
  @extend %part;
}

编译出来的结果是：

.box1, .box2 {
  position: absolute;
  border-radius: 50%;
}

.box1 {
  background: #ccc;
}

.box2 {
  background: #000;
}

我们发现样式片段没有重复。但是@mixin就不能产生DRY式的代码。

@mixin part{
  position: absolute;
  border-radius: 50%;
}

.box1{
  background: #ccc;
  @include part;
}
.box2{
  background: #000;
  @include part;
}

编译结果：

.box1 {
  background: #ccc;
  position: absolute;
  border-radius: 50%;
}

.box2 {
  background: #000;
  position: absolute;
  border-radius: 50%;
}

SASS随机函数 random()

1. 直接使用random()

直接使用则产生一个0-1的随机数，一般会有4-5个小数。

.box {
  opacity: random();	
}

输出：

.box {
  opacity: 0.59874; // 随机生成
}

2. 传参使用

random()接受一个大于等于1的整数。如果小于1或不为整数，则编译报错。

.box {
  font-weight: random(200);	 // 随机生成1-200之间的整数
  font-weight: random(2.5);	 // 报错：Expected $limit to be an integer but got 2.5 for `random'
}

使用随机数如果要跟单位，可以用+号连接它们，也可以用插值#{}包起来，例如：

.box {
  width: random(100) + px;
  height: #{random(100)}px;
}

但是random()不能连接%符号，如果需要生成百分比随机数，则需要用到下面的percentage()函数。

SASS百分比函数 percentage()

percentage() 函数可以把数字转化成百分比。例如：

.box {
  width: percentage(.6)
}

输出结果为：

.box {
  width: 60%;
}

如果随机数+百分比则可以这么写：

.box {
  width: percentage(random(100) / 100)
}

输出结果为：

.box {
  width: 60%; /* 值为随机生成 */
}

SASS for循环

两种方式

for 循环中有两种方式：

@for $i from through
@for $i from to

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

@for $i from 1 through 3{
  .box:nth-child(#{$i}){
    width: 100px;
  }
} 

编译结果为：

.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 100px;
}

.box:nth-child(3) {
  width: 100px;
}

@for $i from 1 to 3{
  .box:nth-child(#{$i}){
    width: 100px;
  }
} 

编译结果为：

.box:nth-child(1) {
  width: 100px;
}

.box:nth-child(2) {
  width: 100px;
}

@for循环实例

雪碧图背景遍历

我们经常会合并相当大小的图标为一张雪碧图，一般这种雪碧图的背景定位是有规律遵循的，如：

@for $i from 0 through 2{
  .icon-#{$i+1}{
    background-position: #{$i*-30}px 0;
  }
}

编译结果为：

.icon-1 {
  background-position: 0px 0;
}
.icon-2 {
  background-position: -30px 0;
}
.icon-3 {
  background-position: -60px 0;
}

SASS 自定义函数 @function

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用： 例如:

@function pxToRem($px) {
  @return ($px / 100) * 1rem;
}
.text {
  font-size: pxToRem(240);
}

编译结果:

.text {
  font-size: 2.4rem;
}

当我们需要生成多重样式（多重shadow，多重gradient）的时候，用@function帮助我们生成就能节省很多工作。 例如：

@function gradient($i, $n) {
  $start: 25px;
  $end: 50px;
  $deg: 360 / $i;
  $val: repeating-linear-gradient(#{$deg}deg, transparent 0% 10%, #000 10% 20%);
  @for $n from 1 through $n {
    $val: $val, repeating-linear-gradient #{$deg * $n}deg,transparent 0% $start, #000 $start $end);
  }
  @return $val;
}

.part {
  width: 200px;
  height: 200px;
  background: linear-gradient(#98d, #69f);
  -webkit-mask-image: gradient(7, 5);
  -webkit-mask-composite: xor;
  border-radius: 50%;
  content: "";
}

生成结果:

.part {
  width: 200px;
  height: 200px;
  background: -webkit-gradient(linear, left top, left bottom, from(#98d), to(#69f));
  background: linear-gradient(#98d, #69f);
  -webkit-mask-image: repeating-linear-gradient(51.42857deg, transparent 0% 10%, #000 10% 20%), 
    repeating-linear-gradient(51.42857deg, transparent 0% 25px, #000 25px 50px),
    repeating-linear-gradient(102.85714deg, transparent 0% 25px, #000 25px 50px),
    repeating-linear-gradient(154.28571deg, transparent 0% 25px, #000 25px 50px),
    repeating-linear-gradient(205.71429deg, transparent 0% 25px, #000 25px 50px),
    repeating-linear-gradient(257.14286deg, transparent 0% 25px, #000 25px 50px);
  -webkit-mask-composite: xor;
  border-radius: 50%;
  content: "";
}

SASS nth 列表函数

语法：

nth($list,$n)

nth()函数用来指定定义的列表中某个位置的值。例如：

$colorList: orange, blue, green;
p {
  color: nth($colorList, 1);
}

编译结果：

p {
  color: orange;
}

当我们有列表需要不同的属性时，可以用遍历+列表函数结合，快速生成对应的值。例如：

$colorList: #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342 #689f38 #558b2f #388e3c;

@for $i from 1 through 9{
  .item:nth-child(#{$i}){
    background: nth($colorList, $i);
  }
}

编译结果如下：

.item:nth-child(1) {
  background: #dcedc8;
}

.item:nth-child(2) {
  background: #c5e1a5;
}

.item:nth-child(3) {
  background: #aed581;
}

.item:nth-child(4) {
  background: #9ccc65;
}

.item:nth-child(5) {
  background: #8bc34a;
}

.item:nth-child(6) {
  background: #7cb342;
}

.item:nth-child(7) {
  background: #689f38;
}

.item:nth-child(8) {
  background: #558b2f;
}

.item:nth-child(9) {
  background: #388e3c;
}