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

converting scss file to css using sass compiler

请参考本代码笔的css部分:

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

它有一堆 sass 代码。

我正在尝试 运行 在我的本地机器上。 我使用 gem.

安装 sass 和指南针

之后我 运行 在终端上执行以下命令:

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;
  }
}

这里有我需要的其他插件吗?

您不会像上面提到的那样使用 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." 这意味着它是 运行ning。

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