您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

将“ 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 = @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"糖果。

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

其他 2022/1/1 18:17:01 有628人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶