美文网首页
less中循环变量怎么写

less中循环变量怎么写

作者: Simple_Learn | 来源:发表于2023-02-04 10:25 被阅读0次
  1. less实现循环,
    代码如下:【循环生成200个点】
.star{
      .loop(@n,@i:1) when(@n > 0 ){
        .loop(@n - 1);
          &:nth-of-type(@{n}){
            @s:~`Math.random()`;
            @random255:~`Math.ceil(Math.random()*255)`;
            @bg:rgb(@random255,@random255,@random255);
            --background: @bg;
            --shadow: 0 0 ~`Math.random()+'vmin'` ~`Math.random()+'vmin'` @bg;
            --size: ~`Math.random()+'vmin'`;
            --back: @n;
            --transform: rotate3d(1, 0, 0, ~`Math.ceil(Math.random()*360)+'deg'`) rotate3d(0, 1, 0, ~`Math.ceil(Math.random()*360)+'deg'`) rotate3d(0, 0, 1, ~`Math.ceil(Math.random()*360)+'deg'`) translate3d(0,0, ~`Math.random()*100+'vmin'`);
          }
        }
      .loop(200);
    }

以上代码就会生成如下的格式:

.star:nth-of-type(1) {
      --size: 0.2835921021vmin;
      --background: #642674;
      --shadow: 0 0 0.1750153474vmin 0.0363164749vmin #642674;
      --transform: rotate3d(1, 0, 0, 328deg) rotate3d(0, 1, 0, 135deg) rotate3d(0, 0, 1, 96deg) translate3d(0,0, 82.541015291vmin)
      ;
    }

相关文章

  • 03.less中的变量,变量插值,及运算

    less中的变量 什么是变量?和js中的概念基本一样 less中定义变量的格式 less中使用变量的格式 和js一...

  • Less语言特性 - 变量

    LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。LESS中声明变量的格式为“@变量名:变量值”。...

  • less文件设置公共图像路径

    (1) 在公共的common.less文件中定义变量imgUrl (2) 然后在需要用到这个图片的less文件中这样写:

  • less语法

    1.使用 客户端使用 注意:less文件需要在less.js前引入 2.变量 输出 注意:less中变量是“常量“...

  • less使用总结

    less语法 less的基础语法常用到的主要有:变量、混合(Mixins)、嵌套规则; 1.变量 和JS中的变量一...

  • Less初始

    Less是一门CSS预处理语言,为了解决CSS中过于呆板的写法。Less =变量 +混合 +函数 变量 (1)使用...

  • web前端入门到实战:css,less实现星空动画

    效果动图如下: 知识点预览 这篇文章的less技巧 + css技巧知识点包括: less如何写循环 less里如何...

  • golang排序的Less接口

    golang中sort包中定义了排序需要的 Less 接口函数签名为 之前不是很明确Less函数该怎么写,使用的时...

  • less在vue中的使用

    首先安装过程就不说了,在vue中引入 开始使用①less中变量的使用在less中允许使用以变量的形式来定义定义: ...

  • Vue Cli3.0 全局引入 less 变量

    我们开发过程中经常会使用很多 less 变量,但是 vue 文件中想使用 less 变量,就需要挨个引入,极其麻烦...

网友评论

      本文标题:less中循环变量怎么写

      本文链接:https://www.haomeiwen.com/subject/qzdohdtx.html