Question

我们正在使用Rails + Sprockets + Compass。 Compass定义了一个linear-gradient function，它与同名的css function冲突。

在我们的scss文件执行@import "compass"之后，有没有办法删除Compass的线性渐变函数，以便我可以将原始线性渐变插入到css中？

我知道我可以重新定义这个功能，但我仍然无法弄清楚如何重新定义它以便我可以插入原始线性渐变。我想完全删除这个功能。

问题是我们正在迁移到libsass，这意味着Compass的基于Ruby的功能不再起作用。所以这个

@import "compass";
.tmp {
  button-background: linear-gradient(to bottom, #fdefd4, #fdc154);
}

我希望按原样输出，编译为：

.tmp {
  button-background: _linear-gradient_legacy(compact(to bottom), #fdefd4, #fdc154...);
}

其中_linear-gradient_legacy是一个基于Ruby的罗盘函数，不再在libsass下扩展。

Answer 1

Compass希望您在使用任一渐变函数（线性/径向）时使用提供的背景和背景图像函数。这就是你获得前缀的方法。所涉及的函数用Ruby编写的原因是你可以为不支持渐变的浏览器获得SVG渐变。

如果你绝对不想要这样，只需重新定义这样的功能：

@function linear-gradient($options...) {
    @return #{'linear-gradient(#{$options})'};
}

在重新声明该功能之前：

@import "compass/css3";

.foo {
  background: linear-gradient(to bottom, #fdefd4, #fdc154);
}

.bar {
  @include background(linear-gradient(to bottom, #fdefd4, #fdc154));
}

输出：

.foo {
  background: linear-gradient(to bottom, #fdefd4, #fdc154);
}

.bar {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkZWZkNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZkYzE1NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdefd4), color-stop(100%, #fdc154));
  background: -moz-linear-gradient(top, #fdefd4, #fdc154);
  background: -webkit-linear-gradient(top, #fdefd4, #fdc154);
  background: linear-gradient(to bottom, #fdefd4, #fdc154);
}

后：

@import "compass/css3";

@function linear-gradient($options...) {
    @return #{'linear-gradient(#{$options})'};
}

.foo {
  background: linear-gradient(to bottom, #fdefd4, #fdc154);
}

.bar {
  @include background(linear-gradient(to bottom, #fdefd4, #fdc154));
}

输出：

.foo {
  background: linear-gradient(to bottom, #fdefd4, #fdc154);
}

.bar {
  background: linear-gradient(to bottom, #fdefd4, #fdc154);
}

否则，您必须在Sass中实现自己的Ruby函数版本。

我可以删除或忽略定义的sass函数吗？

1 个答案: