css - Compass/SCSS 编译将 css 规则重写到相反的方向

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%);
}

我正在纠正规则，但想对为什么会发生这种情况以及为什么它发生得如此悄无声息有一些了解。

• 有人可以指点我一些文档来告诉我为什么会这样吗？
• 另外，是否可以让 compass 警告我这件事，以便我知道它正在重写我的规则？

Answer 1

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

参见，例如 this

或this

引自后文

Now, take a look at the old/new versions of some sample codez:

/* Old */ background-image: linear-gradient(top, red, green);

/* New */ background-image: linear-gradient(to bottom, red, green);

/* Old */ background-image: linear-gradient(left, red, green);

/* New */ background-image: linear-gradient(to right, red, green);

/* Old */ background-image: linear-gradient(bottom left, red, green);

/* New */ background-image: linear-gradient(to top right, red, green);

/* Old */ background-image: linear-gradient(top left, red, green);

/* New */ background-image: linear-gradient(to bottom right, red, green);