vue+scss 开发常用混合器(自用,持续更新)
vue+scss 开发常用混合器(自用)
·
vue+scss 开发常用混合器(自用,持续更新)
@charset "utf-8";
// flex布局,兼容
@mixin myFlex {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
// 阴影,兼容
@mixin boxShadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
//圆角,兼容
@mixin roundCorner($size) {
-webkit-border-radius: $size;
-moz-border-radius: $size;
border-radius: $size;
}
// flex居中
@mixin flexCenter($pos) {
@include myFlex;
// 水平居中
@if $pos=='x' {
justify-content: center;
}
// 垂直居中
@if $pos=='y' {
align-items: center;
}
// 水平、垂直都居中
@if $pos=='c' {
justify-content: center;
align-items: center;
}
}
// 定位居中,兼容
@mixin posCenter {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
// 禁止文本被选择
@mixin user-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin not-touch {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
// 文字超出显示省略号
@mixin ellipsis {
/*加宽度width属来兼容部分浏览*/
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
// 兼容阴影
@mixin myShadow($shadow) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}
// 兼容transform
@mixin myTransform($transform) {
-webkit-transform: $transform;
-moz-transform: $transform;
-ms-transform: $transform;
-o-transform: $transform;
transform: $transform;
}
//文字超出几行显示省略号
@mixin ellipsis-multi($line) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
// 隔行换色
@mixin zebra-lists($evenColor, $evenBgColor, $oddColor, $oddBgColor) {
&:nth-child(2n) {
color: $evenColor;
background-color: $evenBgColor;
}
&:nth-child(2n + 1) {
color: $oddColor;
background-color: $oddBgColor;
}
}
// 禁止换行或强制换行
@mixin text-wraps($status) {
// 强制换行
@if $status=='y' {
// 只对英文起作用,以字母作为换行依据。
word-break: break-all;
// 只对英文起作用,以单词作为换行依据。
word-wrap: break-word;
// 只对中文起作用,强制换行。
white-space: pre-wrap;
}
// 禁止换行
@else {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)