铁人赛27天scss杂纪

今天还是想想不到写啥，所以只能又来继续骗天数罗，今天就是会把原本笔记上面的东西，没有提到部分记录在这一边以後让自己有印象比较好查询，今天在设定新专案的RWD断点，立刻就用上铁人赛的文章内容，今天就偷懒把一些比较杂项的项目纪录上来，一些文字管理的方式，由於今天是笔记形式有些说明就写在注解里面。

//编译前
@mixin fs2($size: 16px, $base: 16px) {
  font-size: $size;
  font-size: ($size / $base) * 1rem;
}
//如果不要装套件可以透过这样转换有rem单位的方式
p {
  @include fs2(24px);
}

//文字大小管理专用
$font: 12px 16px 24px;//数字的阵列
$font-default-level: 2;//预设值

@function px2rem($size, $base: 16px) {
  @return $size / $base * 1rem;
}

@function pxlh($size, $line-padding: 2px) {
  @return $size + $line-padding * 2;
}

@mixin font($level: $font-default-level) {
  @if $level < 1 or $level > length($font) {
    $level: $font-default-level;
  }
  $size: nth($font, $level);
  font-size: $size;
  font-size: px2rem($size);
  line-height: pxlh($size);
  line-height: px2rem(pxlh($size));
}
//如果使用数字的阵列超过，使用第五个值，我们阵列里面没有第五个值，这时候就会选到default的选项

h1 {
  @include font(5);
}

//编译後
p {
  font-size: 24px;
  font-size: 1.5rem;
}

h1 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 20px;
  line-height: 1.25rem;
}