Less中的循环

最新推荐文章于 2024-09-12 13:37:14 发布
原创 最新推荐文章于 2024-09-12 13:37:14 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#less #css

在Less中，mixin可以调用它自身。通过这种递归调用，再结合Guard表达式和模式匹配，就可以写出各种循环结构。如，使用循环来创建一个网格类：



  1. .generate-columns(4);
  2. .generate-columns(@n, @i: 1) when (@i =< @n) {
  3.   .column-@{i} {
  4.     width: (@i * 100% / @n);
  5.   }
  6.   .generate-columns(@n, (@i + 1));
  7. }


编译后的CSS代码为：




  1. .column-1 {
  2.   width: 25%;
  3. }
  4. .column-2 {
  5.   width: 50%;
  6. }
  7. .column-3 {
  8.   width: 75%;
  9. }
  10. .column-4 {
  11.   width: 100%;
  12. }



 
关于作者

 
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。



                

        

    

    
  



    



                



	

		

			

				
					
Less 循环

				
			

			

				

					ivenqin的博客
				

				

					08-21
					
					1145
					
				

			

		

		

			
				
本节我们学习 Less 中的循环 （Loop），循环在编程语言中应该是很常见的，一般编程语言中都有循环，例如在 JavaScript 中有 for 循环、while 循环等，但是在 Less 中没有这两种语法，而是通过自身调用来实现循环。
循环的使用
在 Less 中，混合可以调用它自身，当一个混合递归调用自身，再结合 guard 表达式和模式匹配这两个特性，就可以写出循环结构。
示例：
例如循环输出四个 padding 属性：
.loop(@i) when (@i > 0) {
   .loop((

			
		

	



                

            
              



	

		

			

				
					
less实现循环

				
			

			

				

					m0_46466486的博客
				

				

					06-20
					
					893
					
				

			

		

		

			
				
【代码】less实现循环。

			
		

	



              


  
              

                


	

		

			

				
					
less 循环

				
			

			

				

					kilito_01的博客
				

				

					04-02
					
					737
					
				

			

		

		

			
				
【代码】less 循环。

			
		

	





	

		

			

				
					
less循环操作

				
			

			

				

					weixin_42801311的博客
				

				

					08-19
					
					5997
					
				

			

		

		

			
				
less循环与js的while语句横向式,其实就是一个递归函数配合when函数一起使用,当满足条件将会停下来

.loop(@counter) when (@counter > 0) {
    width: (10px * @counter); // 一些属性的设置
    .loop(@counter - 1)
  }
  
div {
    .loop(5); // launch the loop
}


说道了循环,怎么能少了数组和对象的遍历呢?list是less中用过来存放多个数据的一种.

			
		

	



		

			
		



	

		

			

				
					
less的循环

				
			

			

				

					Rulelur的博客
				

				

					03-10
					
					1380
					
				

			

		

		

			
				
// 定义数组
@list: red, green, yellow;

// less的index是从1开始到length
.loop(@i: 1) when(@i <= length(@list)) {
  @color: extract(@list, @i); // extract取数组的第i个元素

  #@{color} {
    background: @color;
  }

  // i+1的递归调用自身
  .loop(@i + 1);
}

// 不传参数，使用默认设置的@i:1.

			
		

	





	

		

			

				
					
less如何循环数组

				
			

			

				

					m0_61355338的博客
				

				

					06-06
					
					1817
					
				

			

		

		

			
				
在网上寻找了一圈发现太多语法但是大部分都不能使用  可能是我less版本的问题。在这里我记录一下目前我的less版本可以使用的方法。

			
		

	





	

		

			

				
					
less中的循环

				
			

			

				

					seiEight的博客
				

				

					07-07
					
					6022
					
				

			

		

		

			
				
在less中使用媒体查询做rem布局，刚开始是这样写的
.Mixin(){
  @media(min-width: 720px){
    html{
      font-size: 720px/750px*100px;
    }
  }
  @media(min-width: 750px){
    html{
      font-size: 750px/750px*100px;
    ...

			
		

	





	

		

			

				
					
less中循环的使用

				
			

			

				

					爱代码的小海的博客
				

				

					12-07
					
					3297
					
				

			

		

		

			
				
需求背景：
<ul class="ul-thead">
	<li v-for="(item,index) in historyList" :key="index">
	    <p >{{item.date}}</p>
	    <p >{{item.airTemp}}</p>
	    <p >{{item.airHum}}</p>
	    <p >{{item.windDir}}</p&g

			
		

	





	

		

			

				
					
less 循环生成公共样式————less

				
			

			

				

					陈嗯嗯的博客
				

				

					10-12
					
					2081
					
				

			

		

		

			
				
less 公共样式编写————less
@widthList: 10, 20, 30, 40, 50, 60;
@heightList: 10, 20, 30, 40, 50, 60;
@spacingList: 5, 10, 15, 20, 25, 30, 35, 40, 45, 60;
@directionShort: l, r, t, b;
@direction: left, right, top, bottom;

基本变量定义。利用循环遍历生成  n 个样式
//基础循环编写。构建一个函数，循环往

			
		

	





	

		

			

				
					
Less的遍历循环写法

				
			

			

				

					woyaoshengzhang的博客
				

				

					11-19
					
					8770
					
				

			

		

		

			
				
1.html


<ul>
 <li>第一条数据</li>  
 <li>第二条数据</li>  
 <li>第三条数据</li>  
 <li>第四条数据</li> 
</ul>   
 

2.less


// 定义颜色数组
@colorArr: #37a2da, #32c5e9, #67e0e3, #9fe6b8;

// 定义循环最大值，此处使用颜色数组的长度
@len: len

			
		

	





	

		

			

				
					
less 中的循环（each 方式）

				
			

			

				

					Yetian_2000的博客
				

				

					07-06
					
					1363
					
				

			

		

		

			
				
111

			
		

	





	

		

			

				
					
21.1 Less条件语句和循环

					
最新发布

				
			

			

				

					Python老吕的博客
				

				

					09-12
					
					1109
					
				

			

		

		

			
				
通过这些条件语句和循环的应用，Less 代码不仅可以提高样式代码的灵活性和动态性，还能够帮助开发者构建更加复杂和强大的样式效果，满足各种设计需求和条件。Less 提供了条件语句和循环，这些功能使得样式表的生成更加动态和灵活，允许开发者根据不同的条件生成不同的样式规则。关键字可以用来添加条件语句，这在创建主题、响应不同环境或基于变量值应用样式时非常有用。循环，这可以用来生成一系列的样式规则，特别是当需要创建多个类似规则时。混合递归地生成了五个宽度类，每个类都有一个基于计数器的宽度值。

			
		

	





	

		

			

				
					
less循环及函数使用

				
			

			

				

					weixin_45761232的博客
				

				

					09-02
					
					363
					
				

			

		

		

			
				
less循环及函数使用前言一、使用步骤1.修改style标签2.函数封装、定义变量
前言
当时项目使用element库，版本UI样式需要根据按钮（鼠标滑过、按钮获取焦点、禁用）状态展示对应状态的图标，当时使用的是复制粘贴同样代码，但只有class名和图标名称不一样

一、使用步骤
1.修改style标签
代码如下（示例）：
<style lang="less" scoped></style>

2.函数封装、定义变量
定义变量：
class集合数组：
@classTypes: ver

			
		

	





	

		

			

				
					
less的函数与循环

				
			

			

				

					qq_45021462的博客
				

				

					12-09
					
					350
					
				

			

		

		

			
				
我们在有很多类名相似，属性也相似的情况下，定义每个类名，然后给每个类型添加属性，这样的代码很低效，我们可以选择用循环的方式写。
<template>
  <div>
    <div class="up up1">up1</div>
    <div class="up up2">up2</div>
    <div class="up up3">up3</div>
    <div class="up u

			
		

	





	

		

			

				
					
Less循环等进阶用法（MD.6）

				
			

			

				

					夏尔的小酒馆
				

				

					08-14
					
					3773
					
				

			

		

		

			
				
有几天没更新我的漫岛系列了哈，设定十一月底完成漫岛的第一版，时间挺紧迫的，另外，大家能看到的漫岛的部分页面，就截止到个人中心了，其余的先不给看了。 
 
由于知识杂又多，记不过来，像less稍微复杂一点的语法，每次我还得查一查文档，所以把平时遇到的比较不常规的用法记录下来，随时查阅。

言归正传：

Less的循环

实现功能：一个循环搞定多个div的背景图片。 
说明：希望你能领会何时用循环以及...

			
		

	





	

		

			

				
					
less循环写css工具类

				
			

			

				

					asdfghjk11111111的博客
				

				

					06-19
					
					265
					
				

			

		

		

			
				
//margin-right=================.mr(100);    .mr(@n, @i: 1) when (@i =< @n) {    .mr-@{i} {      margin-right: @i+px;    }    .mr(@n, (@i + 1));  } 
less里面+-号挺难弄的,多实验几次差不多就有点体会了
我觉得在样式里面的话+相当...

			
		

	





	

		

			

				
					
less、sass循环使用公共样式

				
			

			

				

					weixin_52850396的博客
				

				

					07-07
					
					577
					
				

			

		

		

			
				
用来书写公共样式，减少代码，使代码更简洁

			
		

	





	

		

			

				
					
如何利用less 实现循环

				
			

			

				

					05-27
				

			

		

		

			
				
在 Less 中可以使用循环语句来生成重复的样式规则，循环语句包括 for 循环和 while 循环。  下面是一个使用 for 循环生成重复样式规则的示例：  ```less @iterations: 3; // 定义循环次数 @base: 5px; // 定义基础值...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值