使用 sass 编译器将 scss 文件转换为 css

Question

请参考本codepen的css部分：

http://codepen.io/anon/pen/JddzEJ

它有一堆 sass 代码。

我正在尝试在我的本地机器上运行它。 我使用 gem 安装 sass 和 compass。

之后我在终端上运行了以下命令：

sass --watch slider.scss:slider.css

现在这是它报告的错误：

error slider.scss (Line 156: Undefined operation: "1.27273em times 1cos(115.71429deg)".)

我不想复制和粘贴整个 200 行的 scss 文件，因此我将粘贴出现错误的部分：

@for $i from 0 through $tip-cp-n {
  $ang-curr: $tip-bubble-ang-ref + $i*$tip-cp-ang-base;

  @if $ang-curr >= $tip-bubble-ang-s and $ang-curr <= $tip-bubble-ang-e {
    $x: $tip-bubble-rx*(1 + cos($ang-curr));   <-- line 156
    $y: $tip-bubble-ry*(1 + sin($ang-curr));
    $tip-cp: $tip-cp, $x $y !global;
  }
}

我这里还需要一些其他插件吗？

Answer 1

您不会像上面提到的那样使用sass --watch 来观察和编译更改。在这种情况下，您会收到该错误，因为只有 Sass 为您进行编译，并且对该 Compass 命令一无所知。对于 Compass 项目，您需要做一些事情。

确保项目目录是使用 Compass 命令创建的。

compass create <your-project-name>，例如compass create compass-test

这将为您的 Compass 项目创建适当的框架，包括自动在其中创建 /sass 目录和 .scss 文件，以及定义编译文件的各种路径和输出的 config.rb 文件。

进入目录，然后运行compass watch 观察变化。

然后你应该会在终端看到 "Compass is watching for changes. Press Ctrl-C to Stop." 这意味着它正在运行。

您现在可以更改/sass 目录中的.scss 文件。