关于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百分比函数 percentage()

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

.box {
  width: percentage(.6)
}

输出结果为：

.box {
  width: 60%;
}

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

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

输出结果为：

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