为什么 Sass 将一个完全有效的径向渐变变成一个无效的径向渐变？

Question

我这里有一个半圆形的径向渐变：http://codepen.io/Inlesco/pen/bpgbKN?editors=1100

渐变样式：

.el:after {
    content: '[=11=]a0';
    background: radial-gradient(at 50% 0%, red 0%, rgba(0,0,0,0.2) 0%, transparent 70%);
    background-size: 100% 30px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}

笔用CSS。但是，如果您设置 CSS 预处理器 (LESS/SASS)，则不会创建渐变，例如，Chrome 将其标记为无效（在检查时看到）。

并且如果我将相同的代码（来自 CodePen 的 HTML / CSS）放置到本地文件（正文 <style> 中的 CSS），则不会创建渐变要么。

为什么它可以在像 CodePen 这样的网络代码编辑器中工作，但没有任何 CSS 预处理器？它们的输出对于径向梯度是否有所不同？

当使用 Sass (SCSS) 编译时，我得到以下结果：

.el:after {
  content: '[=12=]a0';
  background: radial-gradient(at 50% 0% at 50% 0%, #ff0000 0%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  background-size: 100% 30px;
  background-repeat: no-repeat;
  float: left;
  width: 100%;
}

Answer 1

也许您以不正确的方式声明了 LESS 语法。试试这个，

.el {
   margin: 0 auto;
   width: 6em;
   text-align:center;
   font-size:30px;
   &::after {
      content: '[=10=]a0';
      background: radial-gradient(at 50% 0%, red 0%, rgba(0,0,0,0.2) 0%, transparent 70%);
      background-size: 100% 30px;
      background-repeat: no-repeat;
      float:left;
      width:100%;
   }
}

Answer 2

像 Codepen 和 Sassmeister 这样的网站不使用 Sass 编译，它们使用 Compass 编译（Sass 添加了一堆额外的东西）。

Compass 提供了一个名为 radial-gradient 的函数（与 linear-gradient 一起），当与背景和背景图像混合生成前缀和内联 SVG 时，它会在底层做一些奇特的事情给你。

某些版本的 Compass 有一个错误，当您省略可选的形状参数时，它们会生成无效的径向渐变。你只需要添加它：

.el:after {
  content: '[=10=]a0';
  background: radial-gradient(ellipse at 50% 0%, #ff0000 0%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  // ^ added `ellipse` here
  background-size: 100% 30px;
  background-repeat: no-repeat;
  float: left;
  width: 100%;
}

参见：https://github.com/Compass/compass/issues/1937

为什么 Sass 将一个完全有效的径向渐变变成一个无效的径向渐变？

Why is Sass turning a perfectly valid radial-gradient into an invalid one?

css

gradient

sass

radial-gradients