常用Sass mixins总结
2019-06-06 本文已影响0人
放下手机出来嗨
透明度
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
@function calculateRem($size) {
$remSize: $size / 100px;
@return $remSize * 1rem;
}
//字体rem转换
@mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
//禁用样式
@mixin disabled($bgColor, $textColor) {
background-color: $bgColor !important;
color: $textColor !important;
cursor: not-allowed !important;
}
//阴影
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}
/*
三角形
direction 方向
size 大小
borderColor 颜色
*/
@mixin triangle($direction, $size, $borderColor) {
content: "";
height: 0;
width: 0;
display: block;
@if $direction == top {
border-bottom: $size solid $borderColor;
border-left: $size dashed transparent;
border-right: $size dashed transparent;
} @else if $direction == right {
border-left: $size solid $borderColor;
border-top: $size dashed transparent;
border-bottom: $size dashed transparent;
} @else if $direction == bottom {
border-top: $size solid $borderColor;
border-left: $size dashed transparent;
border-right: $size dashed transparent;
} @else if $direction == left {
border-right: $size solid $borderColor;
border-top: $size dashed transparent;
border-bottom: $size dashed transparent;
}
}
//圆角
@mixin radius($radius) {
-webkit-border-radius: calculateRem($radius);
-moz-border-radius: calculateRem($radius);
border-radius: calculateRem($radius);
}
// 居中
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
// 清除浮动
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
// 多行文本溢出省略显示
@mixin text-ellipsis($num) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $num;
-webkit-box-orient: vertical;
}
/**
*imageSrc 路径
*width 宽度
*height 高度
*/
@mixin bgImg($imageSrc, $width, $height, $position: center, $repeat: no-repeat) {
background: url($imageSrc) $repeat $position;
background-size: calculateRem($width) calculateRem($height);
}
