<div class="flex-row d-flex"></div>
<div class="flex-column d-flex"></div>
<div class="flex-grow-1"></div>
<div class="d-flex"></div>
<div class="align-self-center"></div>
//引入
@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);
}