来自国内领先的Zoomla!逐浪CMS团队贡献,混合库文件下载(右键另存为本地)

在任意位置(通常常在头部)用@import "zoomlaCMS";引入官方库(不断更新):


@charset "utf-8";
$文字白色阴影: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #fff;
$文字白色阴影二:2px 2px 4px #ffffff;
$文字黑色阴影:1px 2px 2px rgba(0,0,0,1);
$苹方极细字体: Helvetica Neue,PingFang SC,Microsoft Yahei,\\5FAE\8F6F\96C5\9ED1,STXihei,\\534E\6587\7EC6\9ED1,sans-serif;
@mixin 五秒消失切换{transition: 0.5s ease-in-out;} //用@include引用即可
@mixin 文字白影二{text-shadow: 2px 2px 4px #ffffff; }
@mixin myul{padding-left: 0; margin-bottom: 0;list-style: none;}//UL空间清理
@mixin dflex{display: flex;align-content: center;justify-content: center;align-items: center;} //引用flexbox并指定内部垂直左右居中
@mixin 段落文本对齐处理{text-align: justify; text-justify: inter-ideograph; overflow: hidden;}
@mixin 渐变灰色块{ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6) );}
@mixin 加微软雅黑定义{font-family: -apple-system,"Microsoft Yahei",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}
@mixin 绿色椭圆按钮{display: inline-block; width:8rem; height:3rem; line-height:3rem; background: rgba(13,196,128,1); font-size:1.02rem; color: #fff; text-align: center;border: 1px solid #e0e0e0;border-radius: 100px;}
@mixin 灰色背景蒙板{position: absolute;   top: 0px;  bottom: 0px;  left: 0px; right: 0px;background-color: rgba(0,0,0,0.4);}//父层必须定义 position: relative
@mixin weui的footer兼容固底 {position: fixed; bottom: 0;}
@mixin 清除左边圆角{border-top-left-radius:0;border-bottom-left-radius:0;}
@mixin 清除右边圆角{border-top-right-radius:0;border-bottom-right-radius:0;}
@mixin 清除四边圆角{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;}
@mixin 清背景边框{background: none;background-color: none; border: none;}
@mixin 中国风下划线input{border: none;background: none;border-bottom: 1px solid #999;border-radius: 0;}
@mixin 灰色移动抽屉{  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
@mixin 旋转360度{transform: rotateY(360deg);}
@mixin 单行文字省略号{text-overflow:ellipsis; white-space: nowrap;overflow: hidden;} //需要宽度定义
@mixin 多行文字省略号{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;} //需要宽度定义
@mixin link延伸{ position:absolute;top: 0;right: 0; bottom: 0; left: 0; z-index: 1;content: "";} //父标签应该定义position:relative,推荐采用a::after方式引用。
@mixin 极细标题{font-family:  Helvetica Neue,PingFang SC,Microsoft Yahei,\\5FAE\8F6F\96C5\9ED1,STXihei,\\534E\6587\7EC6\9ED1,sans-serif;font-weight: 100;}



//自定义部份
$欢迎高度:100vh;
$标题浅蓝:#bee5eb;


对于@mixin混合,使用@include引用即可。

各种方法解释说明


 码农加班待更新...