移动端常用的函数(less/sass)

lauhee
lauhee 发布于 2017-01-11 17:42:44 浏览:208 类型:原创 - 随笔 分类:HTML/CSS - 移动端CSS3 二维码: 作者原创 版权保护
/* 伸缩布局容器 */
.db(){
	display: -webkit-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

/* 伸缩性 */
.fx1(@num: 1){
	-webkit-box-flex: @num;
	-webkit-flex: @num;
	-ms-flex:@num;
	flex: @num;
}

/* 伸缩方向为垂直方向 */
.v(){
    -webkit-box-orient:vertical;            
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column; 
}

/* 侧轴方向居中对齐 */
.vh(){
    display:-webkit-box;
    display:box;
    -webkit-box-align:center;
    box-align:center;
}

/* 主轴和侧轴方向居中对齐 */
.vm() { 
    display : box;
    display : -webkit-box; 
    display : -moz-box; 
    -webkit-box-pack : center; 
    -moz-box-pack : center; 
    -webkit-box-align : center; 
    -moz-box-align : center; 
}

/* 文字溢出隐藏 */
.text-overflow() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 旋转变换 */
.tr(@num: 45deg){
	-webkit-transform: rotate(@num);
    -ms-transform:rotate(@num);    
    -moz-transform:rotate(@num);    
    -webkit-transform:rotate(@num);
    -o-transform:rotate(@num);
    transform:rotate(@num);
}

.bs(@num: 50px 50px){
    background-size:(@num); 
}

.br(@num: 50%){
    border-radius: (@num);
}

.text-ov(){ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}

.border-box(){
    box-sizing: border-box;
}

/*文字溢出隐藏--控制文本单行出省略号*/ 
.ellipsis(@w:initial) {
    width: @w;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
/*文字溢出隐藏--控制文本多行出省略号*/
.ellipsisMore(@line:2,@lineheight:1.5rem) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
    line-height: @lineheight;
    max-height: (@lineheight*@line);
}

/*arrow,下拉,跳转等小箭头,go-back*/
.arrowDeg(@deg:45deg){
   -webkit-transform: rotate(@deg);
    transform: rotate(@deg);
}

 /*三角形*/
.triangle(@width:.6rem,@bgColor1:transparent,@bgColor2:transparent,@bgColor3:#fff,@bgColor4:transparent){
    border-style: solid;
    border-color: @bgColor1 @bgColor2 @bgColor3 @bgColor4;
    border-width: @width;
}

/* 实现border=1px 以下1,2,3,*/

/*1:横向border 一般在伪类中引用 (配合定位使用)*/
.setBorderHeight1px(@borderColor:#efefef) {
    display: block;
    content: " ";
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid @borderColor;
    -webkit-transform: scaleY(0.5); 
    -ms-transform: scaleY(0.5); 
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    transform-origin: 0 0; 

}

// 2:纵向border 一般在伪类中引用 (配合定位使用)
.setBorderWidth1px(@borderColor:#efefef) {
    display: block;
    content: " ";
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid @borderColor;
    -webkit-transform: scaleX(0.5);
    -ms-transform: scaleX(0.5);
    transform: scaleX(0.5);
    -webkit-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    transform-origin: 0 0; 
}

/*3:四条边框 border--(配合 right=0使用)*/
.setBorder1px(@borderColor:#b4b4b4,@borderRadius:0) {
    display: block;
    content: " ";
    height: 200%;
    width: 200%;
    box-sizing: border-box;
    border: 1px solid @borderColor;
    border-radius: @borderRadius*2;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    transform-origin: 0 0;  
    position: absolute;
    top: 0;
    left: 0;
}

/*4:任意边框 border--(配合 right=0使用)*/
.setRandomBorder1px(@borderColor:#b4b4b4,@borderRadius:0,@num1, @num2, @num3, @num4) {
    display: block;
    content: " ";
    height: 200%;
    width: 200%;
    box-sizing: border-box;
    border-color: @borderColor;
    border-style: solid;
    border-width: @num1 @num2 @num3 @num4;
    border-radius: @borderRadius*2;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    transform-origin: 0 0;  
    position: absolute;
    top: 0;
    left: 0;
}

/*画三角小箭头,设置大小,颜色*/
.setArrow(@size:.8rem,@borderWidth:2px,@borderColor:#b4b4b4) {
    content: " ";
    display: inline-block;
    height: @size;
    width: @size; 
    box-sizing: border-box;
    border-width: @borderWidth @borderWidth 0 0;
    border-color: @borderColor;
    border-style: solid;
    position: absolute;  
    right: 0;
    top: 50%;
    .arrowDeg(135deg);
}
.arrowTB:after {
        .setArrow();
         margin-top: -.8rem;
}
.arrowBT:after {
    .setArrow();
    .arrowDeg(-45deg);
     margin-top: -.8rem;
}
 .arrowLR:after {
    .setArrow();
    .arrowDeg(45deg);
    margin-top: -.5rem;
}
.arrowRL:after {
    .setArrow();
    .arrowDeg(-135deg);
    margin-top: -.5rem;
}

/*改变原点*/
.preOrigin(@pos1,@pos2) {
    -ms-transform-origin: @pos1 @pos2;
    -moz-transform-origin: @pos1 @pos2;
    -webkit-transform-origin: @pos1 @pos2;
    -o-transform-origin: @pos1 @pos2;
    transform-origin: @pos1 @pos2;
}
z
给个赞 1 人点赞
收藏 3 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
lauhee lauhee 作者

Stay Hungry, Stay Foolish--绕弯的蜗牛

作者最新