less 循环

原创于 2024-04-02 18:19:02 发布 · 788 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

该篇文章介绍了如何使用JavaScript的递归和循环结构，通过模板在HTML中动态设置背景图片，具体展示了当循环变量i大于0时，加载并设置不同索引的图片作为背景的过程。

	.loop(@i) when (@i >= 0) {
				 &.item-@{i}{
					  background: url("../image/@{i}.png");
					  background-size: 100% 100%
				 }
			   .loop((@i - 1));    // 递归调用自身
			   
			 }
			   .loop(6); // 调用循环

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kilito_01

关注关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端领域Less的多列布局与瀑布流布局应用

AI架构全栈开发实战笔记

06-04

697

在前端开发中，布局是用户界面的骨架。传统CSS实现多列或瀑布流布局时，常面临代码重复、参数调整麻烦、响应式适配复杂等问题。本文聚焦“如何用Less优化这两种经典布局”，覆盖Less核心语法的应用、布局原理拆解、实战代码演示，以及真实业务场景的适配技巧。本文将按照“概念引入→原理拆解→Less优化→实战代码→场景应用”的逻辑展开。先通过生活案例理解多列布局和瀑布流的区别，再用Less的语法特性（变量、混合、嵌套）优化布局代码，最后通过完整项目案例演示如何落地。Less。

Less基础语法

最新发布

在全栈和前端徘徊的程序员

05-31

606

摘要： Less 是一种功能强大的 CSS 预处理器，提供变量、嵌套、混合宏、运算、函数等特性，增强 CSS 的可维护性和开发效率。其核心语法包括：变量（@定义）、嵌套结构、父选择器&、带参数的 Mixin、数学运算、颜色处理函数、模块化导入等。此外，支持命名空间、条件判断和递归循环等高级功能。可通过 Node.js、VSCode 插件或构建工具（如 Webpack）编译为 CSS。推荐模块化开发、语义化命名、合理控制嵌套层级，并善用 Mixin 提升代码复用性。

参与评论您还未登录，请先登录后发表或查看评论

Less 循环

ivenqin的博客

08-21

1215

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

less实现循环

m0_46466486的博客

06-20

920

【代码】less实现循环。

less的循环

Rulelur的博客

03-10

1406

// 定义数组 @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中的循环

seiEight的博客

07-07

6041

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

less 循环生成内外边距

01-19

### 使用LESS预处理器生成CSS内边距和外边距样式的循环为了利用LESS预处理器创建一系列具有不同内外边距大小的类，可以定义一个带有参数的混合宏（mixin），并通过`each`或传统的for循环来迭代一组数值。这不仅...

css3、less实现星空动画案例

wyh__2000的博客

07-10

786

效果如图：技术点预览： CSS3背景径向渐变 less实现循环近大远小原理制造空间感 CSS3关键帧动画 HTML文档结构 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c

学习CSS预处理器:Sass和less进行对比

12-13

- Less提供了一些基本的逻辑控制，如条件语句和简单的循环，但功能相对较弱。 - Sass提供了更完整的编程语句，包括if/then/else、for、while等，让CSS编程更灵活。 7. **社区和生态** - Sass拥有更广泛的社区...

如何利用less 实现循环

05-27

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

less循环操作

weixin_42801311的博客

08-19

6027

less循环与js的while语句横向式,其实就是一个递归函数配合when函数一起使用,当满足条件将会停下来 .loop(@counter) when (@counter > 0) { width: (10px * @counter); // 一些属性的设置 .loop(@counter - 1) } div { .loop(5); // launch the loop } 说道了循环,怎么能少了数组和对象的遍历呢?list是less中用过来存放多个数据的一种.

less中循环的使用

爱代码的小海的博客

12-07

3346

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

Less中的循环

歪脖先生的博客

11-21

1158

Less中的循环在Less中，mixin可以调用它自身。通过这种递归调用，再结合Guard表达式和模式匹配，就可以写出各种循环结构。如，使用循环来创建一个网格类： .generate-columns(4);.generate-columns(@n, @i: 1) when (@i = @n) { .column-@{i} { width: (@i * 100% / @n); }

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

陈嗯嗯的博客

10-12

2120

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如何循环数组

m0_61355338的博客

06-06

1877

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

less中的loop循环

Dove_summer的博客

08-22

4967

在项目中管理css一般都会使用预编译语言，其中less算是比较好用的一种。但是官方给的介绍中关于循环生成变量名的方法比较简单，没有针对一串数组值来编译变量名的方法。总结很多文档之后，总结了下面方法用于快速生成css的方法，虽然直接用手写的方式也能使用，但是感觉那样很low。 //下面是使用函数生成margin类名的方式 //定义margin数组 @0px:0px;//使用px单位时有个坑...

Less的遍历循环写法

woyaoshengzhang的博客

11-19

8818

1.html <ul> <li>第一条数据</li> <li>第二条数据</li> <li>第三条数据</li> <li>第四条数据</li> </ul> 2.less // 定义颜色数组 @colorArr: #37a2da, #32c5e9, #67e0e3, #9fe6b8; // 定义循环最大值，此处使用颜色数组的长度 @len: len