16

Im new to sass and tried some code:

$blue: #3bbfce
$margin: 16px

.content-navigation
border-color: $blue
color: darken($blue, 9%)

.border
 padding: $margin / 2
 margin: $margin / 2
 border-color: $blue

But now in my rails app i get this error:

 Invalid CSS after "$margin": expected selector or at-rule, was ": 16px"

Whats wrong?

Now i tried something with zurb:

.your-class-name {
  @include button;
  @include dropdown-button($padding, $pip-color, $base-style);
}

But now i get the error

  Undefined mixin 'dropdown-button'.
John Smith
  • 6,105
  • 16
  • 58
  • 109
  • 1
    It looks like you're missing SASS and SCSS style syntax within the same file. You must pick one or the other. – cimmanon Aug 29 '13 at 20:36

1 Answers1

23

You're missing semicolons after your style declarations. You also need to encapsulate selector declarations within curly brackets:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

You might like to read over this primer from the creators of SASS.

zeantsoi
  • 25,857
  • 7
  • 69
  • 61
  • 1
    Since it worked, would you kindly consider accepting this answer as correct? – zeantsoi Aug 29 '13 at 17:28
  • Yes in 3 minutes! I cant upvote it because i dont have 15 points! But one more thing, i updatet my question, because im getting an new error! – John Smith Aug 29 '13 at 17:32
  • The `Undefined mixin 'dropdown-button'` error indicates that you haven't yet imported the mixin called `dropdown-button`. Check that you have, and that it's a valid import. And FYI, you now have 17 rep points... – zeantsoi Aug 29 '13 at 17:45