//定义颜色 $c55:#555; $c22:#222; $c33:#333; $c99:#999; $c77:#777; $c00:#000; $cff:#fff; $caa:#aaa; $ccc:#ccc; $cf0:#f0f0f0; $cdd:#ddd; $cee:#eee; $cf9:#f9f9f9; $cf7:#F7F7F7; $cfa:#fafafa; $cf60:#FF8225; $c2a:#2a3542; $c35:#35404d; $c1d:#1DA1F2; $cff0:#ff0000; $c02:#02c12a; $cf4:#f4f4f4; $cbbe:#bbe3fb; $cde :#dedede; // 背景图片地址和大小 @mixin bjs($url) { background-image: url($url); background-repeat: no-repeat; background-size: 350px 250px; } //定义magin @mixin setMargin($left, $right, $bottom,$top){ margin:$top $right $bottom $left; } //定义padding @mixin setPadding($left, $right, $bottom,$top){ padding:$top $right $bottom $left; } //居中 @mixin jz { position:absolute; left:0; bottom:0; margin:0; padding:0; } //定义圆角 @mixin borderRadius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } //定位全屏 @mixin allcover{ position:absolute; top:0; right:0; } //定位上下左右居中 @mixin center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } //定位上下居中 @mixin ct { position: absolute; top: 50%; transform: translateY(-50%); } //定位上下居中 @mixin cl { position: absolute; left: 50%; transform: translateX(-50%); } //宽高 @mixin wh($width, $height){ width: $width; height: $height; } @mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2; } //字体大小、行高、字体 @mixin font($size, $line-height, $family: ‘Microsoft YaHei‘) { font: #{$size}/#{$line-height} $family; } //字体大小,颜色 @mixin sc($size, $color){ font-size: $size; color: $color; } //flex 布局和 子元素 对其方式 @mixin fj($type: space-between){ display: flex; justify-content: $type; } @mixin ns{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @mixin hlh($s1) { height: $s1; line-height: $s1; overflow: hidden; } @mixin thl($s2,$s3){ height:$s2; line-height: $s3; text-align: center; } // one line text for ... @mixin oneline($s1) { overflow: hidden; line-height: $s1; height: $s1; white-space: nowrap; text-overflow: ellipsis; } // move @mixin yd($s1:0,$s2:0){ -webkit-transform:translate($s1,$s2); transform:translate($s1,$s2); } // zoom @mixin fd($s1:1.2){ -webkit-transform:scale($s1); transform:scale($s1); } // rotate @mixin xz($deg:360){ -webkit-transform:rotate($deg+deg); transform:rotate($deg+deg); } // for link @mixin dz($time:0.25s){ -webkit-transition: all $time ease-in-out; transition: all $time ease-in-out; } //同时设置magin padding $properties: (margin, padding); @mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; } } //设置magin 和 padding @mixin set-mp($prop,$side, $value) { #{$prop}-#{$side}: $value; } %mt5 { margin-top: 5px; } %mt10 { margin-top: 10px; } %mt15 { margin-top: 15px; } %pt5{ padding-top: 5px; } %pl10{ padding-left:10px; }
时间: 2024-11-05 18:49:17