使用:
- 首先
@import ...
引入 - 在需要使用到的属性地方,
@include xx(xx,xx)
- 对于scss复用的话, 可以使用@extend 达到复用css代码
link: 文档
// 背景图片地址和大小
@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;
}
// 字体超过一定显示省略号
@mixin font-ellipsis(){
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
//flex 布局和 子元素 对其方式 //flex 垂直居中
@mixin fj($type: space-between){
display: flex;
justify-content: $type;
align-items: center;
}
使用时:和函数差不多, 先引入
在使用@include xx(var1,var2 )
使用scss差不多就行函数时编程似的