好吧,简而言之,除了变量和混合声明之类的非常基本的语言语句外,SCSS和Less实际上是完全不同的语言。因此,当涉及到更高级的东西时,例如可变范围和生存期,迭代和条件结构等,它们之间没有直接转换。此外,由于此特定的mixin也是“意大利面条代码”的几乎完美示例,因此从头开始编写这样的mixin实际上比尝试“逐行”转换它更容易:
@import "for";
.long-shadow(@type, @color, @length, @fadeout: true, @scew: false, @direction: right) {
.-() {
@dir: 1px;
@offset: 0;
@s: (.5px * @i);
@a: (1 - @i / @length);
@c: fade(@color, (100% * alpha(@color) * @a * @a));
}
.-() when (@direction = left) {@dir: -1px}
.-() when (@type = @R_110_2419@) {@offset: 1}
.-() when (@scew = false) {@s: ;}
.-() when (@type = text) {@s: ;}
.-() when (@fadeout = false) {@c: @color}
.for(0, (@length - 1)); .-each(@i) {
.-();
@x: (@dir * (@i + @offset));
@y: (1px * (@i + @offset));
@{type}-shadow+: @x @y 0 @s @c;
}
}
usage {
.long-shadow(text, red, 4, true, false, right);
.long-shadow(@R_110_2419@, blue, 4, false, true, left);
}
。它与原始的mixin不完全兼容,例如:
因此,如果您需要精确的克隆,则取决于您进行进一步的修改。
PS是的,并链接]到进口的"for"
糖果。