How to get started with Compass/Sass on Mac – Invalid CSS error?


Tags: css,osx,sass,compass-sass

Problem :

I am trying to get started with Compass/Sass on my Mac. After running sudo gem install compass, I have set up a project with a single main.scss file and I use compass watch to have the file automatically compiled to CSS.

main.scss looks like this:

@import "compass/css3/border-radius"

div .blah .baz {
  @include border-radius(4px, 4px);
  font-weight: bold; 
}

Seems like nothing complicated, right? Well, every time I save the file, I get an error like this:

>>> Change detected to: /Users/mikl/Sites/ddk7/profiles/blaahval/themes/kaskelot/./scss/main.scss
    error ./scss/main.scss (Line 3: Invalid CSS after ".../border-radius"": expected selector or at-rule, was "$blue: #3bbfce;")
overwrite ./css/main.css

Is there something wrong with my SCSS syntax, or just compass just have very poor error messages?



Solution :

As @jnpcl said, a semi-colon would be good. However, if that was the issue it should throw an error directly related to that.

This seems like a stretch, but did you copy and paste that line? Perhaps there is character weirdness happening?


    CSS Howto..

    How to vertically align inline-block divs without vertical spaces using CSS?

    How do I remove the white spaces around my dashboard header on reactjs

    JavaScript- How to change “message” div to yellow

    How to create css based breadcrumb which supports IE8 [closed]

    How to put space between figure in image?

    How to change the scrollbar color using css [duplicate]

    How to remove empty space in thumbnail grid

    How to set p margin for a section

    How Do I Get A Border From YUI GRID Tool?

    How to Assign on demand CSS Styles to some div or class?

    How to apply custom CSS and Javascript specific CMS page Magento

    How to change CSS of website if accessed through a mobile browser [closed]

    How to vertically center text with CSS?

    CSS slideshow - How can I add a link to the image?

    Bootstrap table table-condensed table-hover, Top Border not showing

    how to give dynamic height in css

    How to make one div's height depended of another div's height?

    How to change elements display order in CSS?

    Color of links not always showing correctly

    How to make two buttons in column?

    How to customize Twitter Bootstrap from Illustrator design

    How to measure the amount of time an animation took place using JavaScript

    How can I fix this jumbotron/carousel to be the size of the image?

    How to flip an image horizontally halfway through an animation

    How to get divs 100% of browser using css?

    How to reset CSS3 *-transform: translate(…)?

    CSS: How to move contents of one div into another one

    CSS3 - How to “restore” ::-webkit-scrollbar property to the default scroll bar

    How can i go back, forward and print a (local) WebBrowser1.DocumentText html page that's sourced from my.resorces - vb.net

    How can I get these Bootstrap column divs to be uniform length inside of a well?