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

时间:2015-02-23 21:38:45

标签: css3 sass compass

我正在使用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%);
}

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

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

1 个答案:

答案 0 :(得分:-1)

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

例如,请参阅this

this

引用后来的

  

现在,看看一些示例代码的旧/新版本:

     

/ *旧* /   background-image:线性渐变(顶部,红色,绿色);

     

/ *新* /   background-image:线性渐变(底部,红色,绿色);

     

/ *旧* /   background-image:线性渐变(左,红,绿);

     

/ *新* /   background-image:线性渐变(右,红,绿);

     

/ *旧* /   background-image:线性渐变(左下角,红色,绿色);

     

/ *新* /   background-image:线性渐变(右上角,红色,绿色);

     

/ *旧* /   background-image:线性渐变(左上角,红色,绿色);

     

/ *新* /   background-image:线性渐变(右下角,红色,绿色);