Question

我正在使用Compass编译SCSS，并在编译以下规则时使用：

// foo.scss
div {
    background-image: linear-gradient(left, #cccccc 0%, #eeeeee 60%);
}

它转换为以下CSS规则：

// foo.css
div {
    background-image: linear-gradient(to right, #cccccc 0%, #eeeeee 60%);
}

注意它如何将left翻译成to right。我知道我提供的定义不是正确的格式，它应该是：

// foo.scss
div {
    background-image: linear-gradient(to left, #cccccc 0%, #eeeeee 60%);
}

我正在纠正这条规则，但希望能够理解为什么会发生这种情况，以及为什么它会如此默默地发生。

有人可以给我一些文件，告诉我为什么会这样吗？
另外，是否可以让罗盘警告我这一点，以便我能够意识到它正在重写我的规则？

Answer 1

一个定义是根据旧语法，另一个定义是根据新语法，但两者都是等价的。

例如，请参阅this

或this

引用后来的

现在，看看一些示例代码的旧/新版本：

/ *旧* /   background-image：线性渐变（顶部，红色，绿色）;

/ *新* /   background-image：线性渐变（底部，红色，绿色）;

/ *旧* /   background-image：线性渐变（左，红，绿）;

/ *新* /   background-image：线性渐变（右，红，绿）;

/ *旧* /   background-image：线性渐变（左下角，红色，绿色）;

/ *新* /   background-image：线性渐变（右上角，红色，绿色）;

/ *旧* /   background-image：线性渐变（左上角，红色，绿色）;

/ *新* /   background-image：线性渐变（右下角，红色，绿色）;

Compass / SCSS编译将css规则重写为相反方向

1 个答案: