converting scss file to css using sass compiler

Question

Please refer to the css section of this codepen:

it has a bunch of sass code.

I am trying to run that on my local machine. I install sass and compass using gem.

After that I ran the following command on the terminal:

sass --watch slider.scss:slider.css

Now this is the error that it reports:

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

I do not want to copy and paste the entire 200 line scss file hence I am pasting the section where the error appears:

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

I there some other addon that I require here ?

If you are using Compass with Sass, I think you want to use `compass watch` instead of `sass --watch` as you mentioned above. — kunalbhat, May 03 '15 at 17:41
possible duplicate of [Using a function in Sass is returning the string containing the name of the function rather than the result](http://stackoverflow.com/questions/27588136/using-a-function-in-sass-is-returning-the-string-containing-the-name-of-the-func) — cimmanon, May 03 '15 at 17:51
Also duplicate of http://stackoverflow.com/questions/15511874/file-to-import-not-found-or-unreadable-compass — cimmanon, May 03 '15 at 18:00
Yes, it is a duplicate of the first question. The code you've provided does not produce the error you you claim. There is no function `1cos`, which is what the compiler is whining about. The code references a `cos` function. You need to provide the smallest amount of code that reproduces the error (that includes initializing variables). — cimmanon, May 03 '15 at 18:14
cimmnanon.. i provided the exact code and steps I am using and the error I am getting.. @kunalbhat's answer did the trip.. your useless comments did nothing — runtimeZero, May 03 '15 at 18:25
That's funny, the provided code seems to generate the following errors: `(Line 6: Invalid CSS after "...sin($ang-curr))": expected "{", was ";")`, `(Line 1: Undefined variable: "$tip-cp-n".)`, etc. — cimmanon, May 03 '15 at 18:27

score 0 · Accepted Answer · answered May 03 '15 at 17:54

You would not use sass --watch as you mentioned above to watch and compile changes. In this case, you are receiving that error because only Sass is doing the compilation for you, and doesn't know anything about that Compass command. With Compass projects, you need to do a few things.

Make sure the project directory was created with the Compass command.

compass create <your-project-name>, for example compass create compass-test

This will create the proper framework for your Compass project, including automatically creating a /sass directory and .scss files within it, as well as the config.rb file that defines the various paths and outputs for compiled files.

Change into the directory and then run compass watch to watch for changes.

You should then see in terminal "Compass is watching for changes. Press Ctrl-C to Stop." This means it's running.

You can now make changes to the .scss files within the /sass directory.

References via: http://thesassway.com/beginner/getting-started-with-sass-and-compass — kunalbhat, May 03 '15 at 17:57
not such a straight forward process .. however it worked.. thanks for the detailed steps — runtimeZero, May 03 '15 at 18:22
How can you claim question was not a duplicate of a question where the answer is "use the compass command", but you accept this as the answer anyway? — cimmanon, May 03 '15 at 18:24

converting scss file to css using sass compiler

1 Answers1