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

Question

我们正在使用 Rails+Sprockets+Compass。 Compass定义了一个同名的linear-gradient function, which conflicts with the 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 希望您在使用任一渐变函数 (linear/radial) 时使用提供的背景和背景图像函数。这就是您获得前缀的方式。之所以把涉及的函数写在Ruby中，是为了让不支持渐变的浏览器也能得到SVG渐变

如果您绝对想要 none，只需像这样重新定义函数：

@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 函数吗？

Can I remove or ignore a defined sass function?

ruby

sass

compass