Stylus封装函数

作者 : 开心源码 本文共1752个字,预计阅读时间需要5分钟 发布时间: 2022-05-13 共240人阅读
/*设置宽高*/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封装函数

发表回复