Invalid CSS after "ms": expected "{", was (0)

[WhateverMyNameIs]

I am a complete Ruby, SASS beginner. I bought the Compass application which I use to watch and compile my project. I use the scss syntax.

When I added this piece of code

$ms-base: 1rem;
$ms-ratio: $golden; // 1.618
ms(0); // 1.000rem - $ms-base
ms(1); // 1.618rem
ms(2); // 2.618rem
ms(3); // 4.236rem
ms(4); // 6.854rem
ms(5); // 11.090rem

I got undefined variable $golden. I googled around, found a probable solution and changed $golden to golden(). But I ran into another issue: Invalid CSS after "ms": expected "{", was (0)

So I kinda guess I did something wrong when installing Modular Scale. Here's what I did:

1. Installed Ruby (ruby 1.9.3)
2. installed sass (even though before that I installed compass): gem install sass (-v 3.4.2)
3. gem install modular-scale (hopefully it was installed correctly)
4. Added require 'modular-scale' to the beginning of my config.rb file
5. Added @import 'modular-scale'; to the beginning of my screen.scss (main scss importing file)
6. When seeking for a solution to my problem, I tried gem install modular-scale --pre (1 gem installed)

Could u please help me with this problem? I would be very gratefull.

[Scott Kellum]

To fix the issue with $golden it appears the stylesheet you are currently in does not have access to modular-scale. Try @import 'modular-scale'in your current stylesheet or make sure your stylesheet is linked to your main screen.scss file. Note that modular-scale must come before anything that uses it.

Then you have another issue that is returning this error: Invalid CSS after "ms": expected "{", was "(0)". This is due to invalid SCSS. Raw functions and values can not be used in the root of your document, you must put them in a variable or a property on a selector. Try the following and it should work:

@import 'modular-scale';

$ms-base: 1rem;
$ms-ratio: $golden; // 1.618

scale {
  ms0: ms(0); // 1.000rem - $ms-base
  ms1: ms(1); // 1.618rem
  ms2: ms(2); // 2.618rem
  ms3: ms(3); // 4.236rem
  ms4: ms(4); // 6.854rem
  ms5: ms(5); // 11.090rem
}

You can play around with it here: http://sassmeister.com/gist/62050956773422d0c257

[WhateverMyNameIs]

Hi Scott,
thank you for ur reply. I can't get the
$ms-ratio: $golden;
to work.

My screen.scss looked like this
@import "modular-scale";
@import "compass";
@import "./bootstrap/bootstrap.scss";
@import "./mysite/variables.scss";
@import "./mysite/base.scss";
@import "./mysite/typography.scss";
@import "./mysite/navigation.scss";
@import "./mysite/gallery.scss";
@import "./mysite/forms.scss";
@import "./mysite/icons.scss";

and then I deleted the first line with modular-scale and added this line to file _variables.scss, where there is the previously mentioned code causing errors. _variables.scss looks like this right now

/* TYPOGRAPHY */
@import "modular-scale";
$ms-base: 1rem;
$ms-ratio: $golden; // 1.618
scale {
ms0: ms(0); // 1.000rem - $ms-base
ms1: ms(1); // 1.618rem
ms2: ms(2); // 2.618rem
ms3: ms(3); // 4.236rem
ms4: ms(4); // 6.854rem
ms5: ms(5); // 11.090rem
}

and I still get the error Undefined variable $golden.

Any ideas what's wrong?

[Scott Kellum]

Something is wrong with your import or installation. Make sure you are on the latest version, 2.0.5. For some reason

If all else fails, you can manually copy the modular scale files from the latest release: https://github.com/Team-Sass/modular-scale/releases/tag/v2.0.5

[WhateverMyNameIs]

Scott,
I am not sure, where to copy the files.

I was searching through the files in Compass and the only files related to MS were on the following location
./Install/Compass/lib/ruby/compass_common/modular-scale-1.0.6/stylesheets
and there is just one file _modular-scale.

Should I copy the content of the zip (the scss files) there?

[Scott Kellum]

You can copy the zip files directly into your project and link to modular scale from within your project.

[WhateverMyNameIs]

Copying seems to solve the problem, no more error! Thank you so much for ur help. Wish u all the best!