验证中...
Languages: CSS
Categories: CSS 技巧
Latest update 2019-05-17 14:48
scss 样式编译通用共有;
Raw Copy
mixin.scss@
@charset "utf-8";
$colorBlack:#242424;
$colorWhite:#fff;
$colorMute01:#ddd;
$colorDef01:rgba(0,0,0,.8);
$colorMute02:#ccc;
$colorMute03:#eee;
$colorRed:#d70404;
$colorOrg:#fa8304;
$colorYell:#fae604;
$colorBlue: #3190e8;
$bc: #fef3db;
$fs:100px;
$rw:750px;
@function toRem($w){
@return $w/$fs*1rem;
}
@mixin media($min,$max){
@media screen and (min-width:$min) and (max-width:$max){
@content;
}
}
@mixin media2($min){
@media screen and (min-width:$min){
@content;
}
}
@mixin qz($q,$v...){
-webkit-#{$q}:$v;
-moz-#{$q}:$v;
-ms-#{$q}:$v;
-o-#{$q}:$v;
#{$q}:$v;
}
// 背景图片地址和大小
@mixin bis($url) {
background-image: url($url);
background-repeat: no-repeat;
background-size: 100% 100%;
}
@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 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;
}

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_sixth 5th_float_left_close