@okcy/sass-utils v2020.1214.1

支持所有 vuetify 公共样式

• 在scss中调用颜色map-get(颜色变量,key)

map-get($blue,lighten-4 )

• padding 和 margin 值提升到20

$spacer:5px;
.ma-20
.pa-20

样式替换

• flex-row

<div class="flex-row d-flex"></div>

• flex-column

<div class="flex-column d-flex"></div>

• flex

<div class="flex-grow-1"></div>

• flex-center
• flex-center-justify

<div class="d-flex"></div>
<div class="align-self-center"></div>

字体大小

• 文本（font-size）

您可以使用类 `font-size-{n}` 去设置一个文本大小，其中的 n 是一个对应文本层级所用到的介于 `0-24` 的整数。

文本初始大小`10px` 每一级向下加`2px` 。

自定义 mixin

//引入
@import './styles/mixin.scss';
/**
使用方法   @include css();
**/

/*动态CSS3参数  参数为时长*/
@mixin css($o: 0.3s) {
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
  transition: all $o ease-in-out 0s;
}
/*透明度*/
@mixin opacity($o: 1) {
  opacity: $o;
  filter: alpha(opacity=$o * 100);
}
/*移动位置*/
@mixin translate($o: 10px, $v: 10px) {
  /*
      参数默认值 10PX
      参数1  左右
      参数2  上下
      */
  transform: translate($o, $v);
}
/*放大*/
@mixin scale($o: 1.1) {
  /*参数默认值放大1.1倍*/
  transform: scale($o);
}
/*旋转*/
@mixin rotate($o: 360) {
  /**参数1 旋转角度*/
  transform: rotate($o + deg);
}
/*旋转放大*/
@mixin rotate-scale($o: 360deg, $v: 1.1) {
  /**
      参数1 旋转角度
      参数2 放大倍数
      */
  transform: rotate($o) scale($v);
}

/**
设置投影最大index = 24
  $elevation-color: #49b1f9;
  @import "@okcy/sass-utils/styles/settings/_elevations.scss";
  @import "@okcy/sass-utils/styles/mixin.scss";
  @include elevation(10) ;
*/
@mixin elevation($index) {
  box-shadow: map-get($map: $shadow-key-umbra, $key: $index), map-get($map: $shadow-key-penumbra, $key: $index), map-get($map: $shadow-key-ambient, $key: $index);
}