Stylus封装函数
/*设置宽高*/setWH($width = 100%, $height = 100%) width $width height $height/*设置行高与高度*/setHeight($height) height $height line-height $height/*设置背景图片居中*/setBgImgCenter($url, $size = contain) background-image url($url) background-size $size background-position center background-repeat no-repeat/*置灰,禁用事件*/setDisable() color $black_3 pointer-events none/*btn边框阴影*/boxShadow() box-shadow inset 1px 1px 1px #fff border 1px solid $black_1/*浮动清理*/clearFix() &::before, &::after content "" display table height 0 font-size 0 overflow hidden clear both/*字体设置*/setFont($size = 1.3rem, $color = black, $textAlign = left, $fontWeight = normal) font-size $size color $color text-align $textAlign font-weight $fontWeight/* 定位 */setPosition($pos = absolute, $top = 0, $left = 0) position $pos top $top left $left/*margin + transform 居中*/setCenterUseTransform() margin-top 50% margin-left 50% transform translateY(-50%) translateX(-50%)/*position 居中*/setCenterUsePosition() position absolute left 0 top 0 right 0 bottom 0 margin auto/*flex 布局设置,默认竖列水平垂直居中*/setPosUseFlex($direction = column, $justifyCont = center, $align-items = center, $wrap = initial) display flex flex-direction $direction justify-content $justifyCont align-items $align-items flex-wrap $wrap/*flex 布局设置,所有默认*/setPosUseFlexInit($direction = initial, $justifyCont = initial, $align-items = initial, $wrap = initial) display flex flex-direction $direction justify-content $justifyCont align-items $align-items flex-wrap $wrap/* 设置字体单行文字溢出显示省略号 */setEllipsisOne(){ overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}/* 设置字体多行文字溢出显示省略号 */setEllipsisMore($count = 2){ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $count; overflow: hidden;}/* 选择器插值 */for row in 2 3 4 5 .ellipsis-{row} setEllipsisMore(row)/* 设置table的高度 */for row in 50 60 90 { .tr-{row} { td { height: row * 1px; } }}/* html使用class='ellipsis-3' => setEllipsisMore(3) => ...-webkit-line-clamp: 3;...*/
111.png
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Stylus封装函数
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Stylus封装函数