// 引入scss变量文件
@import "./variable.scss";
/*===================================================================
变量前缀为$ ,方法前缀为_
====================================================================*/
//---背景颜色样式输出
@mixin _bgColor($bg:$c_white) {
background-color: $bg;
}
//---文字渐变技巧
@mixin _gradientText() {
background-color: #DA4AF3;
background-image: linear-gradient(116deg, #FF9800 0%, #ff2a6b 33%, #fb2bf6 58%, #9e3dff 78%, #5f3df7 90%, #2b83ff 100%);
-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
-webkit-background-size: 300% 100%;
// -webkit-animation: masked-animation 5s linear infinite alternate;
-webkit-animation: masked-animation 5s linear infinite;
}
//---显示方式
@mixin _display($arg:block) {
display: $arg;
}
//---隐藏
@mixin _box__hide(){
display: none;
}
//---显示
@mixin _box__show(){
display: block;
}
//---边框线
@mixin _borderAll($color:$c_border,$pixel:1px,$bstyle:solid){
border: $pixel $bstyle $color;
}
// 使用...展开符
@mixin _borderCustom($border...){
border: $border;
}
// 使用#{$var} 插值
@mixin _border($direction,$color:$c_border,$pixel:1px,$bstyle:solid){
border-#{$direction}: $pixel $bstyle $color;
}
//---严格盒模型
@mixin _boxSizing($fn:1) {
@if $fn == 1 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@else {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
}
//---垂直居中布局
@mixin _verticalLayout($left:0,$right:auto,$position:absolute){
position: $position;
top: 0;
bottom: 0;
left: $left;
right: $right;
margin: auto;
}
//---完全居中布局
@mixin _completeCenter($left:0,$right:0,$top:0,$bottom:0,$position:absolute){
position: $position;
top: $top;
bottom: $bottom;
left: $left;
right: $right;
margin: auto;
}
//---垂直文本对齐
// baseline 默认。元素放置在父元素的基线上。
// sub 垂直对齐文本的下标。
// super 垂直对齐文本的上标
// top 把元素的顶端与行中最高元素的顶端对齐
// text-top 把元素的顶端与父元素字体的顶端对齐
// middle 把此元素放置在父元素的中部。
// bottom 把元素的顶端与行中最低的元素的顶端对齐。
// text-bottom 把元素的底端与父元素字体的底端对齐。
// length
// % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
// inherit 规定应该从父元素继承 vertical-align 属性的值。
@mixin _verticalTextAlign($direction:middle){
vertical-align: $direction;
}
//---鼠标悬浮光标显示样式
//url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
//default 默认光标（通常是一个箭头）
//auto 默认。浏览器设置的光标。
//crosshair 光标呈现为十字线。
//pointer 光标呈现为指示链接的指针（一只手）
//move 此光标指示某对象可被移动。
//e-resize 此光标指示矩形框的边缘可被向右（东）移动。
//ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
//nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
//n-resize 此光标指示矩形框的边缘可被向上（北）移动。
//se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
//sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
//s-resize 此光标指示矩形框的边缘可被向下移动（南）。
//w-resize 此光标指示矩形框的边缘可被向左移动（西）。
//text 此光标指示文本。
//wait 此光标指示程序正忙（通常是一只表或沙漏）。
//help 此光标指示可用的帮助（通常是一个问号或一个气球）。
//-webkit-grab 正常大小的手掌
//-webkit-grabbing 抓紧的手掌，小手掌
//-webkit-zoom-in 缩放境+ 放大
//-webkit-zoom-out 缩放境- 缩小
@mixin _cursor($cursor:pointer){
cursor: $cursor;
}
@mixin _allCursor($cursor:pointer){
cursor: $cursor;
& *{
cursor: $cursor;
}
}
//---多行文本默认样式
@mixin _textareaStyle(){
font-size: 13px;
border: 1px solid #d4d4d4;
border-radius: 4px;
background-color: #F7F9FA;
resize: none;
display: inline-block;
vertical-align: top;
outline-style: none;
}
//---文本垂直居中/利用行高垂直居中
@mixin _textLineHeigth($pixel){
height: $pixel;
line-height: $pixel;
}
//---图片大小控制(被容器填充)
@mixin _imgwrap($x:100%,$y:100%){
& img{
width: $x;
height: $y;
}
}
//---盒子溢出处理
@mixin _overflow($method:hidden){
overflow: $method;
}
//---字体间隔
@mixin _spacing($pixel:1px){
letter-spacing: $pixel;
}
//---字体间隔升级版
@mixin _spacingPlus($pixel:1px){
letter-spacing: $pixel;
text-indent: $pixel;
}
//---文本修饰
// none 默认。定义标准的文本。
// underline 定义文本下的一条线。
// overline 定义文本上的一条线。
// line-through 定义穿过文本下的一条线。
// blink 定义闪烁的文本。
// inherit 规定应该从父元素继承 text-decoration 属性的值。
@mixin _textDec($args: underline){
text-decoration: $args;
}
//---删除间隙
@mixin _rmGap($spacing:-4px){
// 引用方法
@include _spacing($spacing);
font-size: 0;
}
//---单行/多行文字溢出省略
@mixin _ellipsis($line:1){
@if $line == 1{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@else{
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
}
//显示模式，默认为溢出隐藏
@mixin _overflow($mode:hidden){
overflow: $mode;
}
//---圆角，方向先垂直方向后左右
@mixin _borderRadius($pixel:50%,$direction:null){
@if $direction == null{
-webkit-border-radius: $pixel;
border-radius: $pixel;
}
@else{
-webkit-border-#{$direction}-radius: $pixel;
border-#{$direction}-radius: $pixel;
}
}
//---圆角(全方向)
@mixin _borderRadiusAll($pixel:50%){
-webkit-border-radius: $pixel;
border-radius: $pixel;
}
//---圆角(补充)
@mixin _borderRadiusCustom($args...){
-webkit-border-radius: $args;
border-radius: $args;
}
//---指定盒模型，默认为怪异盒模型
@mixin _boxSizing($args:border-box){
-webkit-box-sizing: $args;
box-sizing: $args;
}
//---禁止用户对该区域进入选中
@mixin _unUserSelect(){
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
//---启用硬件加速
@mixin _willAccelerate(){
/*提醒浏览器提前准备硬件加速,兼容性不行*/
will-change: transform;
/*触发硬件加速 CPU 转 GPU*/
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
//---线性渐变
@mixin _gradient($bColor,$eColor,$direction:null){
@if $direction == null{
background: -webkit-linear-gradient(left top, $bColor, $eColor);
background: -o-linear-gradient(bottom right, $bColor, $eColor);
background: -moz-linear-gradient(bottom right, $bColor, $eColor);
background: linear-gradient(to bottom right, $bColor, $eColor);
}
@else if $direction == top{
background: -moz-linear-gradient(top, $bColor, $eColor);
background: -o-linear-gradient(top,$bColor, $eColor);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($bColor), to($eColor));
}
@else if $direction == left{
background: -moz-linear-gradient(left, $bColor, $eColor);
background: -o-linear-gradient(left,$bColor, $eColor);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from($bColor), to($eColor));
}
}
//---过滤
/**
* 高斯模糊 blur(px) 0
* 亮度 brightness(%) 1
* 对比度 contrast(%) 1
* 阴影 drop-shadow(h-shadow v-shadow blur spread color)
* 灰度强化 grayscale(%) 0
* 色相旋转 hue-rotate(deg) 0
* 图像反转 invert(%) 0
* 透明度 opacity(%) 1
* 饱和度 saturate(%) 1
* 褐色强化 sepia(%) 0
*/
@mixin _boxFilterDemo(){
-webkit-filter: blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%);
filter: blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%);
}
//--自定义过滤
@mixin _filterCustom($args...){
-webkit-filter: $args;
filter: $args;
}
//---按钮颜色
@mixin _btnColor($bgColor,$txtColor,$h_bgColor,$h_txtColor){
background: $bgColor;
color: $txtColor;
&.actived,&:active{
background: $h_bgColor;
color: $h_txtColor;
}
}
//---盒子阴影颜色
@mixin _boxShadow($range:10px,$color:$c_black,$x:0,$y:0,$ins:false){
@if $ins != true{
-webkit-box-shadow: $x $y $range $color;
-moz-box-shadow: $x $y $range $color;
box-shadow: $x $y $range $color;
}
@else{
-webkit-box-shadow: inset $x $y $range $color;
-moz-box-shadow: inset $x $y $range $color;
box-shadow: inset $x $y $range $color;
}
}
//---盒子阴影颜色(自定义文本)
@mixin _boxShadowByText($args...){
-webkit-box-shadow: $args;
-moz-box-shadow: $args;
box-shadow: $args;
}
//---透明度写法
@mixin _opacity($n){
filter: alpha(opacity=($n)*100);
-moz-opacity: $n;
-khtml-opacity: $n;
opacity: $n;
}
//---元素的显示隐藏
// visible 默认值。元素是可见的。
// hidden 元素是不可见的。
// collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
@mixin _visibility($visible:visible){
visibility: $visible;
}
//---颜色透明
@mixin _colorOpacity($attr,$color,$opacity){
// 插值
#{$attr}: $color - rgba(0,0,0,1 - $opacity);
}
//---旋转
@mixin _rotate($angle:0){
-webkit-transform: rotate($angle);
-moz-transform: rotate($angle);
-o-transform: rotate($angle);
transform: rotate($angle);
}
//---旋转自定义
@mixin _rotateCustom($args...){
-webkit-transform: $args;
transform: $args;
}
//---缩放
@mixin _scale($zoom:0.8){
-webkit-transform: scale($zoom);
-moz-transform: scale($zoom);
-o-transform: scale($zoom);
transform: scale($zoom);
}
@mixin _scaleX($zoom:0.8){
-webkit-transform: scaleX($zoom);
-moz-transform: scaleX($zoom);
-o-transform: scaleX($zoom);
transform: scaleX($zoom);
}
@mixin _scaleY($zoom:0.8){
-webkit-transform: scaleY($zoom);
-moz-transform: scaleY($zoom);
-o-transform: scaleY($zoom);
transform: scaleY($zoom);
}
//---变形中心
@mixin _origin2d($x:0%,$y:0%){
-webkit-transform-origin: $x $y;
-moz-transform-origin: $x $y;
-o-transform-origin: $x $y;
transform-origin: $x $y;
}
@mixin _origin3d($x:0%,$y:0%,$z:0%){
-webkit-transform-origin: $x $y $z;
-moz-transform-origin: $x $y $z;
-o-transform-origin: $x $y $z;
transform-origin: $x $y $z;
}
//---偏移
@mixin _translate3d($x:0,$y:0,$z:0,$imnportant:false){
@if $imnportant == true{
-webkit-transform: translate3d($x,$y,$z) !important;
-moz-transform: translate3d($x,$y,$z) !important;
-o-transform: translate3d($x,$y,$z) !important;
transform: translate3d($x,$y,$z) !important;
}
@else {
-webkit-transform: translate3d($x,$y,$z);
-moz-transform: translate3d($x,$y,$z);
-o-transform: translate3d($x,$y,$z);
transform: translate3d($x,$y,$z);
}
}
//---过渡
@mixin _transitionAll($duration:.3s,$timingFn:linear,$delay:0s){
-webkit-transition: all $duration $delay $timingFn;
-moz-transition: all $duration $delay $timingFn;
-o-transition: all $duration $delay $timingFn;
transition: all $duration $delay $timingFn;
}
//---过渡(补充)
@mixin _transition($args...){
-webkit-transition: $args;
-moz-transition: $args;
-o-transition: $args;
transition: $args;
}
//---变形(自行补充)
@mixin _transform($args...){
-webkit-transform: $args;
transform: $args;
}
//---动画
@mixin _animation($args...){
-webkit-animation: $args;
-moz-animation: $args;
-o-animation: $args;
animation: $args;
}
//---变形中心
@mixin _transformOrigin($x:50%, $y:50% , $z:0){
-webkit-transform-origin: $x $y $z;
-moz-transform-origin: $x $y $z;
-o-transform-origin: $x $y $z;
transform-origin: $x $y $z;
}
//---3D转换
@mixin _transformStyle($theStyle:preserve-3d){
-webkit-transform-style: $theStyle;
transform-style: $theStyle;
}
//---文本提示样式
@mixin _placeholder($color: $c_placeholder, $pixel:null, $lh:null){
&::-webkit-input-placeholder{
color: $color;
}
&:-moz-placeholder{
color: $color;
}
&::-moz-placeholder{
color: $color;
}
&:-ms-input-placeholder{
color: $color;
}
@if $pixel != null{
font-size: $pixel;
}
@if $pixel != null{
line-height: $lh;
}
}
//---icon资源
@mixin _icon($iconUrl:false){
@if $iconUrl != false{
background-image: url(#{$iconUrl});
}
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
//---按钮悬浮交互
@mixin _btnInteractive($color:rgba($c_btn_normal,.5),$showSelfBg:true){
@if $showSelfBg == true{
background-color: $color;
&:hover{
background-color: lighten($color,5%);
}
&:active{
background-color: darken($color,2%);
}
}
@else{
&:hover{
background-color: $color;
}
&:active{
background-color: lighten($color,5%);
}
}
}
//---控制中心小功能盒子
@mixin _funcBoxStyle($pdt:5px,$pdb:15px,$mgt:0,$mgb:15px,$show:true){
padding: $pdt 0 $pdb 0;
margin: $mgt 0 $mgb 0;
@if $show == true{
@include _border(bottom,$c_border_gray,1px,dashed);
}
}
