数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 LESS 中创建循环结构
概述
循环使我们的代码简洁，并帮助多次运行相同的代码行。这使得代码无需多次编写相同的代码行。因此，要对多个容器和对象使用相同的样式，可以通过编写一行代码并多次重复相同的样式属性来完成。为了解决这个问题，Leaner Style Sheets (LESS) 提供了循环功能，通过使用该功能，我们可以使代码的可读性更强，并节省开发人员编写大量样式属性代码的时间。
语法
在 Leaner Style Sheets (LESS) 中使用循环的语法如下：
.functionName (@variableName) when (terminationCondition) { .selector{ font-size : (18px * @variable); color:green } .functionName(decrement/increment); }
函数名 - 函数名可以根据开发人员的选择自定义。
变量名 - 变量名也可以由开发人员编写。LESS 预处理器中的变量名在其前面带有“@”前缀。例如：@name、@width、@height、@border 等。
选择器 - 循环内的选择器是类、id 和标签，这些标签将使用循环动态设置样式。
增量/减量 - 这些是条件属性，取决于开发人员想要执行任务的情况。
终止条件 - 这是循环停止的条件。假设终止条件设置为变量大于 0，并且变量递减，因此当变量值等于或小于 0 时，循环将终止。
算法
步骤 1 - 在任何文本编辑器中创建一个 HTML 基本结构。添加一些带有类名的元素。
步骤 2 - 使用链接“style.css”将样式表链接到 HTML 页面。
<link rel="stylesheet" href="style.css">
步骤 3 - 在同一文件夹中创建一个“style.less”文件，并使用上面给出的语法创建循环，其中包含用户定义的函数名和变量名。
步骤 4 - 添加终止条件，因为当变量值小于 0 时循环终止。
步骤 5 - 现在继承要反映样式的样式组件。如果类名相同，但数字不同，则可以使用当前变量值并将其与类名连接起来。
步骤 6 - 递减变量的当前值。使循环达到终止条件。如果不执行此步骤，则循环将采用当前值，并且只会反映一次更改。
fsize (@variable) when (@variable > 0) {
.space@{variable} {
font-size : (18px * @variable);
color:green
}
.fsize(@variable - 1);
}
步骤 7 - 循环结束时，调用函数并向其中传递值。
.fsize(3);
步骤 8 - 打开终端并使用“cd”命令（更改目录）到达其中的当前文件夹。
步骤 9 - 使用以下命令编译 less 文件。
lessc style.less > style.css
步骤 10 - 现在 LESS 文件已编译并转换为“style.css”。
步骤 11 - 可以在浏览器上查看输出。
示例
在给定的示例中，我们创建了一个简单的 HTML 页面，其中包含一些 HTML div 标签。在 style.less 文件中，我们创建了一个循环，通过该循环，我们迭代了反映特定选择选择器（即类名）的样式属性。在下面给出的 style.less 代码中，考虑了 fsize() 函数，其中变量作为参数传递。在循环中，我们使用了递归属性，该属性在变量值小于或等于 0 时终止。
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>LESS Loops</title>
<style>
.space3 {
font-size: 54px;
color: green;
}
.space2 {
font-size: 36px;
color: green;
}
.space1 {
font-size: 18px;
color: green;
}
.fsize (@variable) when (@variable > 0) {
.space@{variable} {
font-size : (18px * @variable);
color:green
}
.fsize(@variable - 1);
}
.fsize(3);
</style>
</head>
<body>
<div class="space1">tutorialspoint.com</div>
<div class="space2">tutorialspoint.com</div>
<div class="space3">tutorialspoint.com</div>
</body>
</html>
为了将样式反映到主页面，我们必须将 style.less 转换为样式表到 style.css，因为 style.css 表格与索引页面链接。要转换它，我们应该有一个 less 编译器，它将给定的 less 文件编译成 css。现在打开终端并到达 style.less 文件夹以使用下面给出的 less 编译器命令。
使用上述命令，less 文件被编译并转换为层叠样式表 (CSS)，从而更改页面的样式。下面的 style.css 代码是上面编译的 less 文件的结果，其中包含循环。
下图包含上述示例的输出，其中包含三个带有文本的 div 容器。因此，当在 less 文件中调用函数时，循环开始并使用值 3 初始化变量，当样式属性 style 获取值时，它会根据相同的颜色名称相应地计算和更改字体大小。然后变量的值递减 1，然后变量的值设置为 2，并且相同的过程持续进行，直到变量的值小于或等于 0。当变量的值等于 0 时，循环终止，并且当使用 lessc 编译器编译时，它会将更改反映到 css 页面，从而将样式反映到主索引页面。
结论
当代码的某些部分中变量名称错误时，编译代码时会报错。当我们在循环外部调用函数时，LESS 中的功能称为 mixin。这是 LESS 的一个很棒的功能，通过它我们可以将一个元素的属性与另一个元素一起使用。要运行上述循环，必须对循环的工作原理以及递归的理解有基本的了解。
112 次查看
