Multiplicating elements

[joaomilho]

I'm having the following problem: elements are being multiplied Nx for each class defined.

This is my CSS:

/*
 * Buttons (.button):
 *
 *
 * positive - For submiting forms.
 * negative - For cancelations.
 * osdfg - For cancelations.

 *
 * Styleguide 5.1
 */

button,
.button {
  border: none;
  @include border-radius($global-radius);
  font-family: helvetica neue;
  font-size: 16px;
  font-weight: normal;
  @include box-shadow(none);
  background: $color-gray;

  &.negative{
    background: $color-orange;
  }

  &.positive{
    background: $color-dark-blue;
    @extend .small-12;
  }

  @include breakpoint($small) {
    padding-left: 2em !important;
    padding-right: 2em !important;
    width: auto !important;
  }
}

This is the view (slim):

-# This is an example markup for a KSS section.
-# The definition for `1.1` can be found in your app/assets/stylesheets/ folder.

= kss_block '5.1' do |mod|
  a.button[href='#' class=mod] Click 

This is the result:

I was expecting only one button on each row, not 1, then 2, then 3 (if I add another class in the comments I get 4 and so on...)