封装成mixin复用
在写:fire:css的时候, 很多样式都是 很常用但是写起来很麻烦 , 虽然现在有很多成熟的ui框架, 但是我们也不能一个 简单的活动页 也引入那么大个框架吧?
在工作中我也攒下了不少常用css, 我把他们封装成了 mixin , 挑选了:hand:5个分享给大家, 希望大家喜欢.
"复制/粘贴"一把梭
:grin:下面代码统统拿去.
溢出显示省略号
参过参数可以只是单/多行.
/**
* 溢出省略号
* @param {Number} 行数
*/@mixinellipsis($rowCount: 1) { @if$rowCount<=1{overflow: hidden;text-overflow: ellipsis;white-space: nowrap; } @else{min-width:0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:$rowCount; -webkit-box-orient: vertical; }}
真.1px边框
移动端由于像素密度比的问题, 实际的1px边框看起来比较粗, 如果想要更"细"可以使用下面的代码. 不同像素密度比的设备都可以兼容(pc/手机), 还支持任意数量圆角 .
/**
* 真.1px边框
* {List}: 多个方向边框, 默认值为bottom, 你可以根据需要传入(top, left, bottom, right) 4个方向;
* {Color} 边框的颜色, 默认#ccc;
* {List} 4个圆角半径, 默认0;
* {String} 一个高级设置, 一般都不需要改动, 由于细边框的实现使用了css的伪类, 所以为了规避可能出现的样式冲突, 我们可以自己指定使用:after还是:before, 默认after;
*/@mixinthinBorder($directionMaps: bottom,$color:#ccc,$radius: ( 0, 0, 0, 0 ),$position: after) {// 是否只有一个方向$isOnlyOneDir: string==type-of($directionMaps); @if($isOnlyOneDir) {$directionMaps: ($directionMaps); } @each$directionMapin$directionMaps{border-#{$directionMap}:1pxsolid$color; }// 判断圆角是list还是number@if(list==type-of($radius)) {border-radius: nth($radius,1) nth($radius,2) nth($radius,3) nth($radius,4); } @else{border-radius:$radius; } @mediaonly screen and (-webkit-min-device-pixel-ratio: 2) { & {position: relative;// 删除1像素密度比下的边框@each$directionMapin$directionMaps{border-#{$directionMap}: none; } } &:#{$position} { content:"";position: absolute;top:0;left:0;display: block;width:200%;height:200%;transform: scale(0.5);box-sizing: border-box;padding:1px;transform-origin:00;pointer-events: none;border:0solid$color; @each$directionMapin$directionMaps{border-#{$directionMap}-width:1px; }// 判断圆角是list还是number@if(list==type-of($radius)) {border-radius: nth($radius,1) *2nth($radius,2) *2nth($radius,3) *2nth($radius,4) *2; } @else{border-radius:$radius*2; } } } @mediaonly screen and (-webkit-min-device-pixel-ratio: 3) { &:#{$position} { // 判断圆角是list还是number @if (list==type-of($radius)) { border-radius: nth($radius,1) *3nth($radius,2) *3nth($radius,3) *3nth($radius,4) *3; } @else{border-radius:$radius*3; }width:300%;height:300%;transform: scale(0.3333); } }}
等边三角形
常用来做下拉菜单的方向指示, 如果你做的页面就是个简单的活动页, 引入"饿了么"一类的ui就有些大材小用了, 借助"三角形"你可以自己做一个简单的.
/**
* 等边三角形
* @param {String} 尺寸
* @param {Color} 颜色
* @param {String} 方向
*/@mixintriangle($size: 5px,$color: rgba(0, 0, 0, 0.6),$dir: bottom) {width:0;height:0;border-style: solid; @if(bottom==$dir) {border-width:$size$size0$size;border-color:$colortransparent transparent transparent; } @elseif (top==$dir) {border-width:0$size$size$size;border-color: transparent transparent$colortransparent; } @elseif (right==$dir) {border-width:$size0$size$size;border-color: transparent transparent transparent$color; } @elseif (left==$dir) {border-width:$size$size$size0;border-color: transparent$colortransparent transparent; }}
loading
这是一个"半圆边框"旋转的loading, 你可以根据业务需求自己指定圆的半径.
@mixinloading-half-circle($width: 1em) {display: inline-block;height:$width;width:$width;border-radius:$width;border-style: solid;border-width:$width/10;border-color: transparent currentColor transparent transparent;animation: rotate0.6slinear infinite;vertical-align: middle;}
棋盘
如果你做一些界面生成器工具(类易企秀)你会用到.
/**
* 棋盘背景
* @param {Color} 背景色
*/@mixinbgChessboard($color:#aaa) {background-image: linear-gradient(45deg,$color25%, transparent25%, transparent75%,$color75%,$color), linear-gradient(45deg,$color26%, transparent26%, transparent74%,$color74%,$color);background-size:10vw10vw;background-position:00,5vw5vw;}
如果对于学习编程有很多疑惑，没有思路，不知道如何有效率的学习，可以添加我的前端交流学习群 895757445，需要最新系统的学习教程也可以管我要。做了很多年开发，对于学习方式，如何提高自己的技术有一定的经验，术业有专攻，多跟有经验的人交流学习，对这个行业信息了解的多，职业发展的空间就越大
欢迎初学和进阶中的小伙伴。裙里有免费的学习资料，还有专业老师为你解惑，更有免费体验课、免费直播课等福利不定期放送。
网友评论