将“ Long Shadow” SASS混合转换为Less

好吧，简而言之，除了变量和混合声明之类的非常基本的语言语句外，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 = box)       {@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(box,  blue, 4, false, true, left);}

。它与原始的mixin不完全兼容，例如：

• mixin仅接受未加引号的参数（例如

  box

  and

  true

  代替

  'box'

  and

  'true'

  ）
• 使用稍微不同的处理方式

  fadeout

  （可能会更好，请参见下面的PPS）
• 不禁

  fadeout

  用该

  text

  类型（似乎有不必要的限制）
• 产生不同的

  scew

  大小

因此，如果您需要精确的克隆，则取决于您进行进一步的修改。

PS是的，并链接]到进口的

"for"

PPS顺便说一句，有更好的淡出方法，效果更自然。