less10 loop循环
2024-10-01 16:10:14
less
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // 递归调用自身 4 3 2 1 0
width: (10px * @counter); // 每次调用时产生的样式代码 50px 40px 30px 20px 10px
}
div {
.loop(5); // 调用循环
}
.loop1(@counter) when (@counter > 0) {
h@{counter}{
padding: (10px * @counter);
}// 每次调用时产生的样式代码
.loop1((@counter - 1)); // 递归调用自身
}
div {
.loop1(6); // 调用循环
}
.loop2(@counter) when (@counter < 7) {
h@{counter}{
padding: (10px * @counter);
}// 每次调用时产生的样式代码
.loop2((@counter + 1)); // 递归调用自身
}
div {
.loop2(1); // 调用循环
}
css
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
div h6 {
padding: 60px;
}
div h5 {
padding: 50px;
}
div h4 {
padding: 40px;
}
div h3 {
padding: 30px;
}
div h2 {
padding: 20px;
}
div h1 {
padding: 10px;
}
div h1 {
padding: 10px;
}
div h2 {
padding: 20px;
}
div h3 {
padding: 30px;
}
div h4 {
padding: 40px;
}
div h5 {
padding: 50px;
}
div h6 {
padding: 60px;
}
最新文章
- C#+OpenGL+FreeType显示3D文字(3) - 用PointSprite绘制文字
- C++和C代码互相调用是不可避免的
- 最短路--floyd算法模板
- 《Java数据结构与算法》笔记-CH4-6栈结构实现中缀转后缀
- Nginx 的 RTMP 模块的在线统计功能 stat 在 multi-worker 模式下存在 Bug
- echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端
- PHPCMS V9网站更换域名的方法
- fuser命令使用心得
- CSS3 动画及过渡详解
- jsp和servlet的区别和联系
- c++11の泛型算法
- Android 10开发者预览版功能介绍
- Vipe-技术选型
- Spring 实现两种设计模式：工厂模式和单态模式（单例模式）
- this和super用法详解
- Autotest Weekly Report
- mysql 优化总结
- Linux网络编程案例分析
- NLP 入门
- 可用Active Desktop Calendar V7.86 注册码序列号