SCSS 一些常用函数

[NoName4Me]

margin 和 padding

@mixin initBasicPaddingMarginStyle($interval: 5, $start: 5, $cnt: 4) {
  $posMap: (
    'l': 'left',
    'r': 'right',
    't': 'top',
    'b': 'bottom'
  );
  @for $i from 0 through $cnt - 1 {
    $current: $interval * $i + $start;
    .p#{$current} {
      padding: $current + px;
    }
    .m#{$current} {
      padding: $current + px;
    }
    // eg: pr10 { padding-left: 10px; }
    @each $k, $v in $posMap {
      .p#{$k}#{$current} {
        padding-#{$v}: $current + px;
      }
      .m#{$k}#{$current} {
        margin-#{$v}: $current + px;
      }
    }
  }
}

// @include initBasicPaddingMarginStyle();

字体

@mixin initBasicFontSize($interval: 4, $start: 12, $cnt: 4) {
  @for $i from 0 through $cnt - 1 {
    $current: $start + $i * $interval;
    .fs#{$current} {
      font-size: $current + px;
    }
  }
}

// @include initBasicFontSize();

随机颜色

// hsl 颜色表示
@mixin randomColor($what:color) {
  $s-min: 0;
  $s-max: 100;
  $l-min: 30;
  $l-max: 60;
  #{$what}: hsl(
    random(360),
    $s-min+random($s-max+-$s-min),
    $l-min+random($l-max+-$l-min)
  );
}

// @include randomColor(background-color);