css - 将 SCSS 重写为 LESS

Question

刚开始学习 LESS，它看起来与 SCSS 非常相似(SCSS = $ & LESS = @)。

但是，从 SCSS 重写后，我似乎无法让 LESS 工作。

我怀疑这与我的循环有关。是我表达循环的方式还是百分比方程式？

---

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);
        }
    }
}

---

---

少

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

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

所以首先，我检查了你的编译代码，发现你的循环根本没有输出，所以我做的第一件事 - 只是在某处添加了第一次执行以启动循环，因为它已声明，但没有启动.然后我看到你正在使用 less 中不存在的 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);
}

希望对您有所帮助。