7

#yyds干货盘点#常用less函数

 1 year ago
source link: https://blog.51cto.com/u_11365839/5951163
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

#yyds干货盘点#常用less函数

精选 原创

尼羲 2022-12-18 21:26:10 博主文章分类：技术扯淡 ©著作权

文章标签 媒体查询 ipad 文章分类 Html/CSS 前端开发 yyds干货盘点 阅读数187

文本行数限制

.add-text-row-limit(@row) {
  overflow: hidden;
  text-overflow: ellipsis;
  .create();

.create() when (@row > 1) {
    display: -webkit-box;
    -webkit-line-clamp: @row;
    -webkit-box-orient: vertical;
  }

.create() when (@row = 1) {
    white-space: nowrap;
  }
}
p {
  .add-text-row-limit(1);
}
.add-triangle-arrow(@position, @size, @bk-color, @arrow-direction: @position) {
  position: absolute;
  content: '';
  border: @size solid transparent;
  .create();

// 上下
  .create() when (@position = top) {
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
  }

.create() when (@position = bottom) {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
  }

.create() when (@arrow-direction = top) {
    border-bottom-color: @bk-color;
    border-top: 0;
  }

.create() when (@arrow-direction = bottom) {
    border-top-color: @bk-color;
    border-bottom: 0;
  }

// 左右
  .create() when (@position = left) {
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
  }

.create() when (@position = right) {
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
  }

.create() when (@arrow-direction = left) {
    border-right-color: @bk-color;
    border-left: 0;
  }

.create() when (@arrow-direction = right) {
    border-left-color: @bk-color;
    border-right: 0;
  }
}
2.1，使用：
div::after {
  .add-triangle-arrow(
    箭头的位置: left | right | bottom | top,
    箭头大小: 5px,
    箭头颜色: blue,
    箭头方向?: left | right | bottom | top,
  );
}
@pad-screen: 768px;
@iPad-pro-screen: 1024px;
@screenDeviation: 0.1;

.phone(@content) {
  @media screen and (max-width: (@pad-screen - @screenDeviation)) {
    @content();
  }
}

.phoneOrPad(@content) {
  @media screen and (max-width: @iPad-pro-screen) {
    @content();
  }
}

.ipad(@content) {
  @media screen and (min-width: @pad-screen) and (max-width: @iPad-pro-screen) {
    @content();
  }
}

.notIpad(@content) {
  @media screen and (max-width: (@pad-screen - @screenDeviation)), screen and (min-width: (@iPad-pro-screen + @screenDeviation)) {
    @content();
  }
}

.pcOrPad(@content) {
  @media screen and (min-width: @pad-screen) {
    @content();
  }
}

.pc(@content) {
  @media screen and (min-width: (@iPad-pro-screen + @screenDeviation)) {
    @content();
  }
}
3.1 使用
div {
  .phone({
    font-size: 15px;
  });
}

            

        
        
        
    

    

        
  • 
                
                    
                    赞
                
            
    • 
            
  • 
                
                    
                    收藏
                
            
    • 
            
  • 
                
                    
                    评论
                
            
    • 
            
  • 
                
                    
                    分享
                
            
    • 
                            
  • 
                    
                        
                        举报
                    
                
    • 
                    

    
    


        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK