首页 > 其他 > 详细

sass样式预处理之@mixin

时间:2019-03-14 20:23:44      阅读:339      评论:0      收藏:0      [点我收藏+]
$blue: #1e82d0;
$bc: #e4e4e4;
$fc:#fff;

// 背景图片地址和大小
@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;

}

$baseFontSize: 75;//默认基准font-size
@mixin px2rem($name, $px){
#{$name}: $px / $baseFontSize * 1rem;
}

sass样式预处理之@mixin

原文:https://www.cnblogs.com/aisiqi-love/p/10533126.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!