刚开始学习 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));
}
}
最佳答案
你的 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);
}
希望对您有所帮助。
关于css - 将 SCSS 重写为 LESS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45494958/