将SCSS重写为LESS

Question

刚开始学习LESS，看起来与SCSS非常相似（SCSS = $＆amp; LESS = @）。

然而，在从SCSS重写之后，我似乎无法工作。

我怀疑它与我的循环有关。这是我说出我的循环或百分比等式的方式吗？

SCSS

body{
    background:black;
    font-family: 'Varela', sans-serif;
}

.glitch{
    color:white;
    font-size:100px;
    position:relative;
    width:400px;
    margin: 0 auto;
    &:before, &:after{
        content:attr(data-text);
        position:absolute;
        top:0;
        color:white;
        background:black;
        overflow:hidden;
        clip:rect(0,900px,0,0); 
    }
    &:before{
        left:-2px;
        text-shadow:-5px 0 red;
        animation:noise-anim 3s infinite linear alternate-reverse;
    }
    &:after{
        left: 2px;
        text-shadow: -5px 0 blue;
        animation: noise-anim 2s infinite linear alternate-reverse;
    }
}
@keyframes noise-anim{
    $steps:20;
    @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
          clip:rect(random(100)+px,9999px,random(100)+px,0);
        }
    }
}

LESS

https://codepen.io/kangpeter5/pen/mMOyOq

body {
    background:black;
    font-family: "Varela", sans-serif;
}

.glitch {
    color:white;
    font-size:100px;
    position:relative;
    width:400px;
    margin: 0 auto;
    &:before, &:after{
        content:attr(data-text);
        position:absolute;
        top:0;
        color:white;
        background:black;
        overflow:hidden;
        clip:rect(0,900px,0,0); 
    }
    &:before{
        left:-2px;
        text-shadow: -3px 0 red;
        animation:noise-anim 3s infinite linear alternate-reverse;
    }
    &:after{
        left: 2px;
        text-shadow: -3px 0 blue;
        animation: noise-anim 2s infinite linear alternate-reverse;
    }
}
@keyframes noise-anim{
    @steps:20;
    .loop(@steps, @i:0) when (@i<=@steps){
        @keyframeSel: percentage(@i*(1/@steps));
        @{keyframeSel}{
            clip:rect(random(100)+px, 9999px, random(100)+px,0);
        }
        .loop(@steps, (@i+1));
    }
}

Answer 1

你的文件中有几个错误，但我必须保证只有你仔细阅读红色文档才能解决所有错误;）因为我不明白你为什么要从scss切换到更少的错误无论如何，我更喜欢它们，即使它们有不同的优点和缺点，它们都做同样的事情，我仍然想帮助你，并解释你的代码在codepen上有什么问题。

首先，我已经检查了你的编译代码并且看到你的循环根本没有输出，所以我做的第一件事 - 只是添加了第一个执行到某个地方的启动循环，因为它被声明，但没有启动。然后我看到你正在使用不存在的random(100) mixin，所以只是嘲笑它，推出变量并且看起来它现在正在工作：）

@keyframes noise-anim{
  @steps:20;
  .loop(@steps, @i:0) when (@i=<@steps){
    @keyframeSel: percentage(@i*(1/@steps),~'%');
    @{keyframeSel}{
      @rand1: ~"`Math.random()*100`px";
      @rand2: ~"`Math.random()*100`px";
      clip:rect(@rand1, 9999px, @rand2,0);
    }
    .loop(@steps, (@i+1));
  }
  .loop(@steps);
}

希望它有所帮助。