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

【问题标题】：Can I remove or ignore a defined sass function?我可以删除或忽略定义的 sass 函数吗？
【发布时间】：2015-11-19 03:31:10
【问题描述】：

我们使用的是 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 下扩展。

【问题讨论】：

仅仅声明缺少的函数有什么问题，究竟是什么？
我不清楚如何定义一个返回与函数名称相同的内容的 sass 函数。正如您在下面建议的那样，使用插值 #{} 是我缺少的技巧。

标签： ruby sass compass

【解决方案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 函数版本。

【讨论】：